One noteworthy consideration we're encountering as we're preemptively implementing these styles in our project: The float-ing of the icon works well as a way to avoid excess spacing between the icon and text when the HTML markup includes whitespace between the two, which is pretty easy to do inadvertently:

However, if a button is stretched using a width utility (e.g. width-full, min-width), the float will cause the icon to appear at the far left of the button, rather than left of the centered text.

The float can be avoided (which is what we've done), but this means a developer must be careful to avoid whitespace themselves if they want the spacing to be correct.

• Maybe this caveat is okay?
• Maybe the float placement to the left of the button is ok?
• Maybe worth reconsidering a wrapper class or text wrapping element after all? (much easier to solve with flex, or tricks like font-size: 0)

Sorry for the late response. I think this is a needed improvement, but needs discussion on how to best handle the use cases. For example, any specific styles tied to icon being inside buttons might need it's own modifier class.

In the meantime I've tagged it for Needs discussion and will add @amyleadem and @thisisdano as reviewers.

Opened up an enhancement for this issue #5359. We want to look at potential solutions that:

• Don't rely heavily on calculations for alignment/spacing.
• Use simpler selectors (potentially :has()).
• Include a separate story or control for this change.

We'll open a new PR against #5359 for this work.

Thank you for the contribution and I apologize it took so long to address.

I've created a new PR to add basic alignment to icons in buttons without relying on calc(). In the future, I'd like to allow more control for alignment, control, theming. Hopefully on improved support for:has().

Closing in favor of #5398.