htmlangularangular-materialfrontendgoogle-material-icons

Angular Material doesn't load certain icons

Using angular (17.2.1), @angular/material (17.3.7) and I can't seem to load certain icons coming from Google Fonts Icons. An example of an icon that isn't loading is e911_emergency.

This is how I'm using the icons:

<button mat-fab extended [mat-dialog-close]="'emergency'">
      <mat-icon>e911_emergency</mat-icon>
      Emergency
</button>

I've installed @angular/material using ng add @angular/material.

This is my index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

StackBlitz Demo: https://stackblitz.com/edit/stackblitz-starters-5sfz4z?file=src%2Fmain.ts (here I am using Angular v18 and STILL doesn't work!)

Solution
    1. Import the Material Symbols Outlined stylesheet.
    <link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
/>
    1. Specify the fontSet attribute to both elements.
    <mat-icon fontSet="material-symbols-outlined">e911_emergency</mat-icon>

    Demo @ StackBlitz

    Key points:

    1. By default, Material icons font is used.
    2. If you face that the icon is not rendering, it is due to the specified icon does not belong to the Material icons font stylesheet.
    3. Browse the specified icons in the Google Fonts website and check the required stylesheet.
    4. Import the required stylesheet to the root application (index.html).
    5. Add the fontSet attribute with the class name as in Point 3.

    For importing icons that are not Google Fonts icons (for example Font Awesome), the same steps should be taken by importing the stylesheet and adding the fontSet attribute to the <mat-icon> element.

    Reference: Mat Icon