材料图标无法显示在材料选择中

Question

在材料表中，我创建了一个过滤器列，在此过滤器中，我创建了一个Select。使用材料图标和文字进行选择。

HTML代码如下所示：

<mat-select placeholder="Choose status" [formControl]="statusFilter">
  <mat-option *ngFor="let selectFilterOption of selectFilterOptions" [(value)]="selectFilterOption">
    <ng-container *ngIf="selectFilterOption === OverViewEntryStatus.SUCCESS">
      <div class="state-success">
        <mat-select-trigger>
          <mat-icon>done</mat-icon>
        </mat-select-trigger>
      </div>
      {{ selectFilterOption }}
    </ng-container>
    <ng-container *ngIf="selectFilterOption === OverViewEntryStatus.FAILURE">
      <div class="state-failure">
        <mat-select-trigger>
          <mat-icon>clear</mat-icon>
        </mat-select-trigger>
      </div>
      {{ selectFilterOption }}
    </ng-container>
    <ng-container *ngIf="selectFilterOption === OverViewEntryStatus.UNKNOWN">
      <div class="state-unknown">
        <mat-select-trigger> <mat-icon>clear</mat-icon></mat-select-trigger>
      </div>
      {{ selectFilterOption }}
    </ng-container>
    <ng-container *ngIf="selectFilterOption === 'All'">
      {{ selectFilterOption }}
    </ng-container>
  </mat-option>
</mat-select>

在选择选项中可以显示物料图标，但是如果我选择一个选项，则该选项中的图标将不会显示在选择输入字段中。

在选择字段中应动态显示材料图标。

您有解决方案吗？

最好的问候，

狮子座