Add instructions to use mat-icon with alternative Material Icons themes

[bisonfoutu]

Documentation Feedback

I recently noticed there are currently no instructions in the docs explaining how to use mat-icon with the alternative Material Icons themes (outlined, rounded, two-tone and sharp).

This may be because it is not officially supported, but I happened to find a way to make it work quite simply, so I thought it could be nice to reference this method in the docs.

I had to change the Material Icons font import url to https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

and then use mat-icon like this: <mat-icon fontSet="material-icons-round">home</mat-icon>

This has been discussed in a feature request issue: #14853

Affected documentation page: https://material.angular.io/components/icon

[the-ult]

Is it already possible to set a global value as well? Like with the form fields ?
e.g.
providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }],

[bisonfoutu]

@the-ult I just checked and there is currently no const for MatIcons to set their default appearance. You'll have to stick with the fontSet property.
Maybe wrap it in a custom component ?

[JarekToro]

You can register it in the AppModule like this and then use mat icons normally with no fontSet setting needed

export class AppModule {
  constructor(iconRegistry: MatIconRegistry) {
    iconRegistry.setDefaultFontSetClass('material-icons-round');
  }
}

From the api docs for Mat-Icon

setDefaultFontSetClass
Sets the CSS class name to be used for icon fonts when an  component does not have a fontSet input value, and is not loading an icon by name or URL.

[Dzivo]

@JarekToro just to add to your solution you need to add

  constructor(iconRegistry: MatIconRegistry) {
    iconRegistry.setDefaultFontSetClass('material-icons-round');
  }

In the module where you are actually providing MatIconRegistry for me it was SharedModule