How do we set the fontSet attribute on MatIcon in order to get the Material Symbols to render.

I'm trying to render the expand_content symbol however it is not rendering as shown in the material icons font.

This is the markup for rendering it as a span element:

<span class="material-symbols-outlined">
expand_content
</span>

This is how Angular Renders it: .ts,src%2Findex.html

This is the markup:

<mat-icon fontSet="material-icons-outlined">expand_content</mat-icon>

And this is the icon I'm trying to render.

How do we set the fontSet attribute on MatIcon in order to get the Material Symbols to render.

I'm trying to render the expand_content symbol however it is not rendering as shown in the material icons font.

This is the markup for rendering it as a span element:

<span class="material-symbols-outlined">
expand_content
</span>

This is how Angular Renders it: https://stackblitz./edit/stackblitz-starters-lgahav?file=src%2Fmain.ts,src%2Findex.html

This is the markup:

<mat-icon fontSet="material-icons-outlined">expand_content</mat-icon>

And this is the icon I'm trying to render.

• javascript
• angular
• typescript
• angular-material
• material-icons

Share Improve this question Follow edited Feb 26, 2024 at 14:40 Ole asked Feb 25, 2024 at 19:58 OleOle 47.6k7070 gold badges238238 silver badges446446 bronze badges 3

• hmm i can see the icon rendered in the stackblitz – cmgchess Commented Feb 25, 2024 at 20:16
• @Yogi Yes indeed I'm looking for it to render the expand icon in the link you shared. – Ole Commented Feb 26, 2024 at 0:32
• Indeed. The fontSet attribute is usually used to control which icon is rendered and how, so I'm sure if it has the correct value, the icon will render. – Ole Commented Feb 26, 2024 at 14:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The class material-symbols-outlined to mat-icon like this.

 <mat-icon class="material-symbols-outlined">expand_content</mat-icon>

There's notes on this in this issue.

Also there's an NPM package with more detailed instructions for Material Symbols use in general.

Someone else (brilliant) shared this:

 provideAppInitializer(() => {
      const initializerFn = ((iconRegistry: MatIconRegistry) => () => {
        const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
        const outlinedFontSetClasses = defaultFontSetClasses
          .filter((fontSetClass) => fontSetClass !== 'material-icons')
          .concat(['material-symbols-outlined']);
        iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
      })(inject(MatIconRegistry));
      return initializerFn();
    })

add this to your appConfig providers so all mat-icons will use the fontset you register in here.