Angular mat-icon 不显示图标

Question

我正在尝试使用 mat-icon，但它无法正常工作。我有一个 table 并且在一个数据单元格内我正在尝试使用一个垫子图标。问题是它不显示图标，而是显示名称。我在 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">

Angular mat-icon 不显示图标

Angular mat-icon doesn't show the icon

html

angular

angular-material

icons