How to add an icon to the data in a certain Angular material column

Question

I can't figure out how to make an icon added to the data in the Status column, I'm using Angular material.
My page markup:

        <table mat-table [dataSource]="dataSource">
          <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
            <th class="auto-buy__table-header" mat-header-cell *matHeaderCellDef>
              {{ column.header }}
            </th>
            <td mat-cell *matCellDef="let row">
              {{ column.cell(row) }}
              <button (click)="onEditSession(row)" class="auto-buy__table-button">
                <img *ngIf="column.columnDef == 'removeButton'" class="auto-buy__table-icon"
                     src="assets/img/edit-icon.svg" alt="edit"/>
              </button>
              <button (click)="onRemoveSession(row)" class="auto-buy__table-button">
                <img *ngIf="column.columnDef == 'editButton'" class="auto-buy__table-icon"
                     src="assets/img/trash-icon.svg" alt="remove"/>
              </button>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>

I want this result actual result

But it turns out like this expected result

Answer 1

I believe you need to set a height and width for you img elements, that will fix your issue.

Or you could use the provided Angular Material Icons instead of using separate images, you can find a big icon list here

<table mat-table [dataSource]="dataSource">
  <ng-container
    *ngFor="let column of columns"
    [matColumnDef]="column.columnDef"
  >

    <th class="auto-buy__table-header" mat-header-cell *matHeaderCellDef>
      {{ column.header }}
    </th>

    <td mat-cell *matCellDef="let row">
      {{ column.cell(row) }}
      <button (click)="onEditSession(row)" class="auto-buy__table-button">
        Edit
        <mat-icon>edit</mat-icon> <!-->Material Icon</-->
      </button>
      <button (click)="onRemoveSession(row)" class="auto-buy__table-button">
        Remove
        <mat-icon>delete</mat-icon> <!-->Material Icon</-->
      </button>
    </td>

  </ng-container>

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