[mwc-button] Icon is not vertically aligned with the button text

[contis2908]

Describe the bug Displaying a button containing an icon and text will not show them both vertically aligned.

To Reproduce Steps to reproduce the behavior: Implement mwc-button with property icon and label

Expected behavior Text and icon should be automatically alligned.

Screenshots

Browser Version (please complete the following information):

• OS: macOS Big Sur
• Browser: tested in chrome
• Version: Version 95.0.4638.54 (Official Build) (x86_64)

Additional context The problem can be fixed if the span container with class leading-icon (that holds the slotted icon) css display is set to display: contents;

[dfreedm]

Ah, the span's line-height is larger than the icon's. Good catch!

[contis2908]

Yes, then line-height inheritance is a problem. However, I believe that this isn't enough depending on the expected outcome. I would expect the text and icon to be aligned in the center. Fixing the line-height will position them just on their baseline. While this is fine I believe that depending on the icon in many situations this will give a weird look to the button.

[christophe-g]

in many situations this will give a weird look to the button.

Like, possibly related: #1045, #2131.

[asyncLiz]

Fixed in M3