fa-icon 'size' not working in mat-icon-button v15 onwards

[Stexxen]

Here is a Example using A14 and Afontawesome11 https://stackblitz.com/edit/angular-ivy-kbrdrf

Here is a Example using A15 and Afontawesome12 https://stackblitz.com/edit/angular-ivy-qlmj1k

They both use the same html

<button mat-icon-button color="primary">
  <fa-icon [icon]="['fab', 'github']" size="4x"></fa-icon>
</button>

I can see that there are some upgrade instructions for moving from 0.11.0 to 0.12.0 https://github.com/FortAwesome/angular-fontawesome/blob/main/docs/upgrading/0.11.0-0.12.0.md but that doesn't appear to apply to the size field.

Is it that size is no longer supported when inside an mat-icon-button?

I've also tried A16, A17 and A18, and they show results consist with the A15 result

[devoto13]

Notice that besides angular-fontawesome you have also upgraded Angular Material 😉 If you check their changelog, you can notice that the mentioned mat-icon-button component has been rewritten (among many others) based on MDC. That's where the issue comes from. The styles are now more strict and supersede size=4x you have set.

From their docs it does not look like different button sizes are supported, but looks like some people are able to achieve it with a third-party directive/custom CSS.

Based on the above, this does not look like the issue is with the angular-fontawesome library, but you have relied on some undocumented behaviour of Angular Material which no longer works since Angular Material 15.

[Stexxen]

Thanks @devoto13 I didn't know that had happened to mat-icon-button. It's a shame really as when you use mat-icon you can simple use the css scale to make the icon smaller or larger

See https://stackblitz.com/edit/angular-ivy-x6v4b8 for an example using A18