如何在 mat-table 行中显示图标？

Question

I use the mat-table and return an html data (an hyperlink) to this table and want to display icon or html on the related column's rows.

<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

But I am not sure how can I display it and how to distinguist if the related column is icon column. Because I do not get tableColumn peoperty in the row. How can I do this?

Here is a DEMO and in this demo I just want to render this hyperlink below:

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, 
      name: '<a href="http://www.google.com/search?q=Angular">Angular</a>', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}
];

Answer 1

You can add mat-icon in your mat-cell and assign your html data to innerHTML attribute.

<!-- Name Column -->
<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element"> 
    <mat-icon [innerHTML]="element.name"></mat-icon> </td>
</ng-container>

Reference: https://stackblitz.com/edit/angular-8vpb5f?file=src/app/table-basic-example.html