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

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

Thank you for sharing, @ikeen0807 .

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

-Zach

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:[email protected]"

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

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.

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.

Google Fonts now displays a note in the style selection indicating that Material Icons are deprecated.

Yes, the Material Icons set has not gotten routine updates in at least two or three years now. Material Symbols has many more icons now as a result, and could be labeled as “current” rather than “new” at this point.

The urgency of this issue should be upped, it's not P3 anymore with Material Icons having become deprecated.