Angular Material Icons

Using Google's Material Symbols and classic Material Icons with Angular Material's <mat-icon>: font setup, styles, variable settings and SVG icons.

1. Add the font

Add the Material Symbols stylesheet to src/index.html:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
/>

Add &icon_names=home,search,… (sorted A–Z) to load only the icons you use, which makes the font much smaller.

2. Make Material Symbols the default

mat-icon uses the classic material-icons font by default. To use Material Symbols for every icon, set the default font set class once, for example in your root component:

import { Component, inject } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";

@Component({ /* … */ })
export class AppComponent {
  constructor() {
    inject(MatIconRegistry).setDefaultFontSetClass("material-symbols-outlined");
  }
}

3. Use icons by name

<mat-icon>home</mat-icon>
<mat-icon fontSet="material-symbols-rounded">favorite</mat-icon>

<!-- In a button -->
<button mat-icon-button aria-label="Delete">
  <mat-icon>delete</mat-icon>
</button>

Names are the ones on each icon's page here (arrow_back, shopping_cart). The fontSet input switches one icon to another style: material-symbols-rounded or material-symbols-sharp, with the matching family in the stylesheet.

4. Fill, weight, grade and size

Material Symbols' variable settings are CSS, so set them globally or per class:

/* styles.css */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.mat-icon.filled {
  font-variation-settings: "FILL" 1;
}

SVG icons instead of a font

To ship only the icons you use without loading a font, register SVG files with MatIconRegistry and use svgIcon. Download the SVG from any icon's page here into src/assets/icons/:

import { Component, inject } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

@Component({ /* … */ })
export class AppComponent {
  constructor() {
    const sanitizer = inject(DomSanitizer);
    inject(MatIconRegistry).addSvgIcon("home", sanitizer.bypassSecurityTrustResourceUrl("assets/icons/home.svg"));
  }
}

<!-- template (HttpClient must be provided, e.g. provideHttpClient()) -->
<mat-icon svgIcon="home"></mat-icon>

Classic Material Icons

Projects still on the older set load family=Material+Icons (or Material+Icons+Outlined, +Round, +Sharp, +Two+Tone) and write <mat-icon>home</mat-icon> with no other setup. Most names are the same in Material Symbols, so switching is usually steps 1 and 2 (see Material Icons vs. Material Symbols).

Most used icons

Each has its mat-icon code, SVG and PNG.