feat(material icon): Support for Material Symbols

[mark-langer]

Feature Description

Google just published Material Symbols, a fresher version of material icons that's also packaged within a variable font, giving us designers & developers more fine-grained control over the icons' looks 🎨 Plus, their default icon styles look a tad more modern (-> rounded icons).

It would be great to use them in our Angular projects through one of Angular's material components.

Use Case

Simplify using Google's new Material Symbols font.

[thw0rted]

See also: https://developers.google.com/fonts/docs/material_symbols

[wibimaster]

I don't know how you want to simplify, but at this time, you can do that :
index.html: <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" rel="stylesheet">
your.component.ts: <mat-icon fontSet="material-symbols-outlined">breastfeeding</mat-icon>

[dvalley56]

Tested on angular 13

Material symbols work flawlessly

Need to add this in index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,0,0" />

And class="material-symbols-outlined" in mat-icon

Tip:

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

Add this in AppModule so all mat-icons will have this class

[mmanista-bynd]

note - if applying @dvalley56's solution, you might run into the mat-icons not being visible when you specify the icon type as fontIcon attribute of mat-icon, like this:

                  <mat-icon fontIcon="arrow_downward"></mat-icon>

where this:

                  <mat-icon>arrow_downward</mat-icon>

still works fine.

iconRegistry.setDefaultFontSetClass('material-symbols-outlined');

causes the mat-ligature-font class to be removed from the mat-icon elements.

A safer solution might be to only replace the material-icons class with material-symbols-outlined (and keep the rest of the default font sets), like this for example:

export class AppModule {
  constructor(private readonly iconRegistry: MatIconRegistry) {
    const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
    const outlinedFontSetClasses = defaultFontSetClasses
      .filter((fontSetClass) => fontSetClass !== 'material-icons')
      .concat(['material-symbols-outlined']);
    iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
  }
}

which keeps the mat-ligature-font class name and both usages of mat-icon work fine

[mibnd]

Hey! Great solutions.

@mmanista-bynd thanks for the fix.

Obsolete comment

It seems I need to concat the 'material-symbols-outlined' string instead of the 'material-icons-outlined' in @mmanista-bynd's solution.