如何将材质图标添加到 Angular 数据表标题答案

【问题标题】：How to add Material Icon To Angular Data Table Headers如何将材质图标添加到 Angular 数据表标题
【发布时间】：2019-11-25 07:47:37
【问题描述】：

我正在尝试向 Angular 数据表的表头添加一个图标。我错过了什么？

另外，我想让它可点击以显示模式。我应该添加什么？

          <th mat-header-cell *matHeaderCellDef mat-sort-header> Action Name </th>
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
          <td mat-cell *matCellDef="let action"> {{action.actionName}} </td>
        </ng-container>````

【问题讨论】：

你希望什么是可点击的，单元格还是标题？
@t8tortotlover 标头可点击打开一个模态框。
所以基本上当我单击表头时，我应该能够看到一个模态框，最终我将在其中构建一个过滤器功能。

标签： javascript angular angular-material material-design

【解决方案1】：

将图标组件放在标题中：

<th mat-header-cell *matHeaderCellDef mat-sort-header>
  <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
  Action Name
</th>
<td mat-cell *matCellDef="let action"> {{action.actionName}} </td>

【讨论】：