Search code examples
javascriptangulartypescriptangular-materialmaterial-icons

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

Solution

  • 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.