bug(mat-icon-button): icon buttons are not baselined with other types of buttons after changing height and width

[iKrishnaSahu]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

v14

Description

Icon buttons are not baselined with other types of buttons after changing height and width

v16 (https://stackblitz.com/edit/tzatnc?file=src%2Fstyles.scss,src%2Fapp%2Fbutton-overview-example.css)

v14 (https://stackblitz.com/edit/hgda6s?file=src%2Fstyles.scss,src%2Fapp%2Fbutton-overview-example.html)

Reproduction

Steps to reproduce:

1. Open this stackblitz
2. Check the UI

Expected Behavior

Icon Buttons should be baselined with other buttons

Actual Behavior

Icon Buttons are not baselined with other buttons

Environment

• Angular: 16
• CDK/Material: 16
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[iKrishnaSahu]

Adding vertical-align: middle; on mat-icon-button fixes this issue.

But should we add this fix inside the libary?

[iKrishnaSahu]

Same for mat-mini-fab button - https://stackblitz.com/edit/tzatnc-nkmxrp?file=src%2Fapp%2Fbutton-overview-example.html

[sondreb]

This is still an issue in latest release (18.0.4). The trick mentioned above does work nicely and should hopefully be adopted as a fix for the library.