Status Column with icons In afi listing page

  <td mat-cell *matCellDef="let element">

                  <ng-container [ngSwitch]="element.AFIprogressState">

                    <!-- Not Initiated -->

                    <span *ngSwitchCase="0" title="Not Initiated" class="status-hover">

                      <mat-icon color="warn" style="vertical-align: middle;">hourglass_empty</mat-icon>

                      <span class="label status-label">Not Initiated</span>

                    </span>

                    <!-- Started -->

                    <span *ngSwitchCase="1" title="Started" class="status-hover">

                      <mat-icon color="primary" style="vertical-align: middle;">play_circle</mat-icon>

                      <span class="label status-label">Started</span>

                    </span>

                    <!-- Completed -->

                    <span *ngSwitchCase="2" title="Completed" class="status-hover">

                      <mat-icon color="accent" style="vertical-align: middle;">check_circle</mat-icon>

                      <span class="label status-label">Completed</span>

                    </span>

                    <!-- Rejected -->

                    <span *ngSwitchCase="3" title="Rejected" class="status-hover">

                      <mat-icon color="warn" style="vertical-align: middle;">cancel</mat-icon>

                      <span class="label status-label">Rejected</span>

                    </span>

                    <!-- Cancelled -->

                    <span *ngSwitchCase="4" title="Cancelled" class="status-hover">

                      <mat-icon color="warn" style="vertical-align: middle;">block</mat-icon>

                      <span class="label status-label">Cancelled</span>

                    </span>

                    <!-- Deleted -->

                    <span *ngSwitchCase="5" title="Deleted" class="status-hover">

                      <mat-icon color="warn" style="vertical-align: middle;">delete</mat-icon>

                      <span class="label status-label">Deleted</span>

                    </span>

                    <!-- Default fallback -->

                    <span *ngSwitchDefault>

                      {{ getAFIProgressState(element.AFIprogressState) }}

                    </span>

                  </ng-container>

                  <style>

                    .status-hover .status-label {

                      display: none;

                    }

                    .status-hover:hover .status-label {

                      display: inline;

                    }

                  </style>

                </td>