Angular mat-icon doesn't show the icon

Issue

I’m trying to use mat-icon but it doesn’t work properly. I have a table and inside a data cell I’m trying to use a mat-icon. The problem is that it doesn’t the show icon but is showing the name. I included import { MatIconModule } from "@angular/material/icon" in app.module.ts
e.g: clear => it’s showing: clear
My code:

<div class="mat-elevation-z8 layout-container">
  <table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="Index">
      <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">No.</th>
      <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
    </ng-container>
    <ng-container matColumnDef="Icon">
      <th mat-header-cell *matHeaderCellDef>Icon</th>
      <td mat-cell *matCellDef="let element"><mat-icon>clear</mat-icon></td>
    </ng-container>
</table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"> </mat-paginator>
</div>```

Solution

Add to your index.html the following

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

Answered By – Panagiotis Bougioukos

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.