Material icons do not work in Angular 17?

Question

Icons don't work in Angular.

In the component.ts file:

import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-dashboard-space',
  standalone: true,
  imports: [
    MatIconModule,
  ],

And in the HTML file:

<div class="w-[20rem] h-[20rem] bg-yellow-100">
  <mat-icon>grade</mat-icon>
</div>

and what I see is the text: "gra"

Of course, I ran npm install --save @angular/material.

But the console is empty. Do you have any idea?

Answer 1

As stated in Getting Started with Angular Material,

The ng add command will additionally perform the following actions:

Add the Material Design icon font to your index.html

Ensure that the Material icon stylesheet is included in the index.html, if not you need to add it manually.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">