Angular mat-icon 不显示图标

Question

我正在尝试使用 mat-icon 但它不能正常工作。我有一个表格，在一个数据单元格内，我正在尝试使用 mat-icon。问题是它没有显示图标，而是显示名称。我在 app.module.ts 中包含了 import { MatIconModule } from "@angular/material/icon" 例如：清除 => 它显示：清除 我的代码：

<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>```

Answer 1

将以下内容添加到您的index.html

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