Description
Bug:
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle routerLink="/cl-appointments" value="appointments">
<mat-icon>event</mat-icon>
<span fxHide.sm fxHide.xs>Appointments</span>
</mat-button-toggle>
<mat-button-toggle routerLink="/tasks" value="tasks">
<mat-icon svgIcon="c_tasks"></mat-icon>
<span fxHide.sm fxHide.xs>Tasks</span>
</mat-button-toggle>svgIcon with button toggle is not aligning middle horizontally with text in Material 7
What is the expected behavior?
Both material icon and custom svg icon should be aligning middle horizontally with text in the button
What is the current behavior?
In NG MD 5 and 6, both material icon and custom svg icon are aligning middle horizontally with text in the button.
In NG MD 7 (amethyst ammonite), the svgIcon is aligning to the bottom of the button, thus appearing lower than material icon of the other buttons in same row.
What are the steps to reproduce?
Use svgIcon in a button toggle.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular Material 7 (amethyst ammonite), with predefined theme deeppurple-amber.css.
Is there anything else we should know?
Apparently this is due to that in NG MD 7 the default height of button is taller, thus a defect in the styling of svgIcon has become a bug in NG MD 7, while in narrower button, the svgIcon is squeezed into middle.
Currently the workaround is to introduce class material-icons in my app codes, like:
<mat-icon class="material-icons" svgIcon="c_tasks"></mat-icon>While this is looking good now, so to enjoy other improvements of NG MD 7, however, I am not sure if using this class is semantically correct. So it is better the NG MD team provides a fix in next release.