feat(material icon): Support for Material Symbols

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.

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

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>

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

@dvalley56

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

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

@ikeen0807

Thank you for sharing, @ikeen0807 .

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

-Zach

@mmanista-bynd

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]
}

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;
}

}`

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:FILL@0..1"

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

feat(material/icon): add material symbol classes automatically (#33750)

fix(multiple): include material symbols in selectors (#33754)

docs: update documentation to use Material Symbols (#33796)

build: switch infra to material symbols

build: switch infra to material symbols (#33798)

fix(material/core): generate Material Symbols in schematic (#33797)

I've landed several PRs (see the linked ones above) that implement this. From 22.2 going forward all the docs refer to Material Symbols, ng-add will generate a link to Material Symbols and MatIconRegistry will attempt to detect it in order to assign the right CSS class.

@crisbeto

@crisbeto as someone who soon has to upgrade a lot of projects from v21: is there some kind of migration that would detect Material Symbols already being used and somehow work with that? Or what do I need to keep in mind when upgrading from v21 w/ Material Symbols already in use?

It's worth noting that Material Icons is still the default, because changing it would've been a massive breaking change. However, if you have a <link> tag with Material Symbols, we have some logic here that will detect it and apply the correct class automatically.

So if you're on Material Icons, things will continue to work like before. If you want to switch to Symbols, all you need to do is change your <link> tag.

I just looked at how it's done in our projects: we define a new font-face (in our case called Material Symbols Outlined) for the Symbols and then basically do what I wrote here:
#24845 (comment)

So there's no in our code, it just loads it via @font-face and CSS class styles. I assume, whenever Angular actually updates the icons to Symbols, I will probably be able to just remove the extra code I added to override Material Icons. Am I correct in that assumption?

Yes, you should be able to drop that JS code from your app since it happens automatically.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

feat(material icon): Support for Material Symbols #24845

Feature Description

Use Case

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

feat(material icon): Support for Material Symbols #24845

Description

Feature Description

Use Case

Activity

thw0rted commented on May 3, 2022

wibimaster commented on Oct 7, 2022

dvalley56 commented on Dec 4, 2022

mmanista-bynd commented on Apr 17, 2023

mibnd commented on Apr 26, 2023

ikeen0807 commented on Jan 3, 2024

zarend commented on Jan 4, 2024

Panossa commented on Mar 12, 2024

NoamRivlin commented on Mar 19, 2024

Spawnrad commented on Mar 27, 2024

14 remaining items

crisbeto commented on Sep 14, 2026

Panossa commented on Sep 14, 2026

crisbeto commented on Sep 14, 2026

Panossa commented on Sep 14, 2026

crisbeto commented on Sep 15, 2026

angular-automatic-lock-bot commented on Oct 20, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions