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/main.ts (here I am using Angular v18 and STILL doesn't work!)

Continue reading...