You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It seems to me, like the fa-icon component behaviour is correct here. It just that Material icon and button are well integrated together, while Material button and fa-icon are not, so you'll need to apply some custom CSS to make them play well with each other.
When you set size="2x" it means base font at the location of icon times 2. Material button has a hard-coded height of 40px, while base font size inside it is 14px. As a result 2x fa-icon
ends up with a box being 28px height, which is obviously not vertically aligned inside button with 40px height.
What you can do is either compensate 12px gap using paddings or adjust base font size to be 20px, so icon is 40px high and takes all the height of the Material button. You may also want to add vertical-align: unset to fa-icon to achieve perfectly vertically centred icon as by default fa-icon will try to align with the text base line and is a bit shifted to the bottom.
Describe the problem
I used angular fontawesome with mat-icon-button from Angular Material. Any other size other than default is having an offset.
Current Size: 2x
Other icon on the left(Moon) is Material Design Icon. Which has proper alignment.
What did you expect?
I want it centre aligned inside button by default.
Reproducible test case
https://stackblitz.com/edit/angular-z8v4ux
The text was updated successfully, but these errors were encountered: