Add icon as button in each row of angular material table

I am using angular material version 9.2.4 I have a table in html. The table has been displayed properly. But I want to add an icon as button in each row of the table. The table datas are coming from a rest api while I want to use same icon(say Delete icon) in each row of the table.

<mat-table [dataSource]="employeeData" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="phoneNumber">
  <mat-header-cell *matHeaderCellDef> PHONE NUMBER </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.phoneNumber}} </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="emailId">
  <mat-header-cell *matHeaderCellDef> EMAIL ID </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.emailId}} </mat-cell>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="dateOfBirth">
  <mat-header-cell *matHeaderCellDef> DATE OF BIRTH </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.dateOfBirth }} </mat-cell>
</ng-container>

<!-- Delete Column -->
<ng-container matColumnDef="deleteEmployee">
  <mat-cell *matCellDef="let element">
    <!-- <button mat-icon-button aria-label="Example icon button with a vertical three dot icon"> -->
      <mat-icon>delete</mat-icon>
    <!-- </button> -->
  </mat-cell>
</ng-container>

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

I am not able to get the delete icon. the table looks like this

I want to display the delete icon after the column date of birth. What I am missing?