CODEWITHSUNDEEP
javascriptangularangular-materialmaterial-design
kjamp
kjamp

Reputation: 367

How to add Material Icon To Angular Data Table Headers

I'm trying to add a icon to to the table header of an Angular Data Table. What am I missing?

Also, I want to make this clickable in order to show a modal. What should I add?

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

Upvotes: 2

Views: 4377

Answers (1)

Tom Faltesek
Tom Faltesek

Reputation: 2818

Place the icon component within the header:

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

Upvotes: 2

Related Questions