bug(material/button): mat-icon-button has different display on anchor and button

[DaSchTour]

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

No response

Description

I use FontAwesome Icons with Material and with version 15 discovered a lot of issues with icons.
One for which I could create a reproduction is a different display between <a mat-icon-button></a> and <button mat-icon-button></button>

Reproduction

https://angular-ivy-dgra38.stackblitz.io

Expected Behavior

The icon position is the same for anchor and button

Actual Behavior

The anchor is positioned to the left

Environment

• Angular: 15.0.1
• CDK/Material: 15.0.0
• Browser(s): Chrome

[DaSchTour]

Additionally a <a mat-icon-button></a> inside mat-toolbar is shifted to the bottom. Also added this to the stackblitz above.

[crisbeto]

I've opened #26146 which should resolve most of the inconsistencies, but I wanted to note that your example is mixing mat-icon and fa-icon. Since we don't own the latter, we can't guarantee that it'll align exactly the the Material icons.

[DaSchTour]

Yes I know. But I'm currently experimenting which of them work better. mat-icon worked fine with the SVG in v14 but it's extremely hard do adjust in v15 to look good and be correctly aligned.