Use with angular material button

[vishnu-dev]

Describe the problem

I used angular fontawesome with mat-icon-button from Angular Material. Any other size other than default is having an offset.

<button mat-icon-button color="primary">
     <fa-icon [icon]="userIcon" size="2x"></fa-icon>
 </button>

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

[devoto13]

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.

See the StackBlitz.

I'll think if there is anything we can do in angular-fontawesome to make the integration more straight-forward.

[blogcraft]

I still have a problem with fa-icon and mat-icon-button in the latest version of angular material

[Frosty1604]

@blogcraft see here: #450 (comment)

[drimlike]

Same issue here. And there is no custom variable to overwrite it. So it's fairly limitating not to have the same custom styling capabilities as other buttons.