Блог

Я пытаюсь добавить кнопку обновления в таблицу данных материалов в Angular 7, но название значка refresh отображается курсивом вместо значка.

Соответствующий код показан ниже:

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

Разве невозможно добавить значок материала в заголовок таблицы данных?

Он работал с обычной таблицей.

Обнаружена проблема.

Применяемый font-family к заголовку затенял Material Icons шрифт.

Добавление правильного шрифта к стилю компонента, а также удаление курсивного стиля решили проблему.