Angular 7：材料按钮图标在数据表的 header 中不起作用

Question

I'm trying to add a refresh button to a Material Data Table on Angular 7, but the name of the icon, refresh is shown in italic instead of the icon.

The relevant code is shown below:

<table mat-table [dataSource]="myDataSource">
  <!-- other rows... -->

  <ng-container matColumnDef="buttons">
    <th mat-header-cell *matHeaderCellDef>
      <button (click)="reload()" mat-icon-button>
        <i class="material-icons" alt="reload">refresh</i>
      </button>
    </th>
    <td mat-cell *matCellDef="let row">
      <!-- buttons for each row here -->
    </td>
  </ng-container>
</table>

Is it not possible to add a material icon to the header of a datatable?

It did work with a normal table.

Answer 1

Found the problem.

The font-family being applied to the header was shadowing the Material Icons font.

Adding the correct font to the style of the component, as well as removing the italic style, solved the issue.