bug(COMPONENT): MAT-ICON exhibits different behaviors when the fontSet is

[KMaster90]

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

With the default icon fontSet I can use <mat-icon fontIcon=icon_name/>

but if I change all the icons to outlined using
iconRegistry.setDefaultFontSetClass('material-icons-outlined'); or if I use it on a specific Icon fontSet="material-icons-outlined"

<mat-icon fontIcon=icon_name/> DOESN'T WORK

I HAVE TO USE <mat-icon>icon_name</mat-icon> TO LET IT WORK NOW

(so the problem is to change all the icons when the app is already done)

Reproduction

StackBlitz link: Steps to reproduce: 1. 2.

Expected Behavior

<mat-icon fontIcon=icon_name fontSet="material-icons-outlined"/> HAS TO WORK

Actual Behavior

<mat-icon fontIcon=icon_name fontSet="material-icons-outlined"/> DOESN'T WORK

Environment

• Angular: 17.1
• CDK/Material: 17.1
• Browser(s): arc
• Operating System (e.g. Windows, macOS, Ubuntu): mac

[zarend]

Hello @KMaster90 ,

I believe the expected behavior is that setDefaultFontSetClass only afects <mat-icon> when it uses fontSet input.

  /**
   * Sets the CSS classes to be used for icon fonts when an `<mat-icon>` component does not
   * have a fontSet input value, and is not loading an icon by name or URL.
   */
  setDefaultFontSetClass(...classNames: string[]): this {
    this._defaultFontSetClass = classNames;
    return this;
  }

We generally ask issue reports to have Stackblitz reproduction. If you think there could be an improvement, I suggest starting a discussion or creating a feature request.

Expected Behavior HAS TO WORK

Actual Behavior DOESN'T WORK

If you would like support, I suggest using the support channels, which are StackOverflow, Gitter, and Google Groups. We can give a limited amount of support in this issue tracker.

Best Regards,

Zach

[KMaster90]

STACKBLITZ: StackBlitz-Bug_Example

THIS IMAGE SHOWS 1 ICON INSTEAD OF 2

Thank you for your prompt response, anyway, it is evident from the stackblitz and the pictures that if I change the fontSet for the component providers: [{ provide: MAT_ICON_DEFAULT_OPTIONS, useValue: { fontSet: 'material-icons-outlined' }, }], then <mat-icon>home</mat-icon> this format works <mat-icon fontIcon="home" /> this format doesn't work

It seems more a bug than a feature, am I wrong?

Thank you, Paolo

[niltor]

Same issue,marked!

<mat-icon fontSet="material-icons-outlined">person</mat-icon> works. <mat-icon fontIcon="person" fontSet="material-icons-outlined"></mat-icon> not work!

[Hiwados]

i experienced the same issue, is there any plan to fix this?

[neildeighan]

I am experiencing similar issue .. see stackblitz @mmalerba