Wrong placement of the icon in mwc-button in a mwc-dialog.

[vdegenne]

Here's a reproduction

https://jsbin.com/qeconuw/edit?html,output

The icon in the mwc-button is not aligned with the text, when used in a mwc-dialog.

Last year I opened this issue : https://github.com/material-components/material-components-web-components/issues/1045 for the same reason. It was fixed, but recently I noticed that the misplacement appears again.

[taylor-vann]

Hey @vdegenne

Thanks for providing a jsbin to reference!

Here's a jsbin where the icon in mwc-button is centered and styled correctly by using the slot property on your 'open' button.

<mwc-button slot="primaryAction"> ...
<mwc-button slot="secondaryAction"> ...

We control the styling more heavily in our slotted actions.

I wouldn't recommend putting buttons in a mwc-dialog ourside the "primaryAction" and "secondaryAction" slots. The intention of dialog is to have a 'yes / no' or 'okay / cancel' relationship between the user, the dialog, and dialog's actions (the buttons).

[taylor-vann]

It's still technically a wayward CSS property inheritance so I will be taking ownership of this bug :) Thanks for submitting!

[christophe-g]

Anything new on this ? Thanks

[vdegenne]

I am the author of this post. After almost a whole year this bug is still there. Can we hope to see this fixed soon? Maybe levelling up the priority? as it is common to have buttons with icon in dialogs.

Thanks

[asyncliz]

Fixed in M3

[vdegenne]

M3 for the win! :+1: