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.

[ikeen0807]

There now is an NPM package availabe through which you can easily use the new set of material symbols from Google.

https://www.npmjs.com/package/material-symbols

[zarend]

Thank you for sharing, @ikeen0807 .

@mark-langer, does material-symbols work for your use-case?

-Zach

[Panossa]

Another way to do this besides what @mmanista-bynd suggested is doing it via Provider. This way it runs earlier and you can also save it (the provider) as a constant in a library or anywhere to be added to your app.config.ts (newer Angular versions) or anywhere where you can add providers (e.g. main.ts in newer or older Angular versions):

{
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: (iconRegistry: MatIconRegistry) => () => {
    const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
    const outlinedFontSetClasses = defaultFontSetClasses
      .filter((fontSetClass) => fontSetClass !== 'material-icons')
      .concat(['material-symbols-outlined']);
    iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
  },
  deps: [MatIconRegistry]
}

[NoamRivlin]

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

in my HTML it seems that im unable to get filled icons or symbols, only outlined. maybe due to fill being 0? how do you handle fill, cause SCSS doesn't help:

`.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;

&.star-fill {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

}`

[Spawnrad]

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

in my HTML it seems that im unable to get filled icons or symbols, only outlined. maybe due to fill being 0? how do you handle fill, cause SCSS doesn't help:

`.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;

&.star-fill {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

}`

Use this :

link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:[email protected]"

You need to declare the range to be able to do : font-variation-settings: "FILL" 1, or font-variation-settings: "FILL" 0;

[ilyakonrad]

Is MatIcon сomponent going to support quick ways to configure icon appearance when using Material Symbols (weight, fill, grade, size)? I mean via input properties.

I think "fill" would be especially useful in projects that want to switch from Material Icons to Material Symbols, since e. g. "fill" in Material Icons Round is kind of random compared to Material Symbols where it's controlled by the user.

[mrmokwa]

Not only that, but some MD3 specs uses both styles to indicate an state. For exemple, navigation rail within an active route, should use the filled variant while, not-active uses the default outlined icons.