CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialmaterial-icons
Ole
Ole

Reputation: 47222

How to use Material Icons Symbols with Angular?

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.com/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.

enter image description here

Upvotes: 1

Views: 3828

Answers (2)

Mattijs
Mattijs

Reputation: 3440

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.

Upvotes: 2

wnvko
wnvko

Reputation: 2120

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.

Upvotes: 3

Related Questions