材料选择与材料图标问题

Question

我想在mat-select

中为每个选项添加一个图标

<mat-form-field>
   <mat-select placeholder="warningtype"
     [(ngModel)]="selected.warningType" matInput #warning="ngModel" name="warning">

     <mat-option *ngFor="let warning of warnings" [value]="warning.value">
      <div>
       <span *ngIf="warning.label === WarningType.ERROR"><i class='material-icons red'>highlight_off</i></span>
       <span *ngIf="warning.label === WarningType.INFO">
          <i class='material-icons blue'>error_outline</i></span>
       <span *ngIf="warning.label === WarningType.WARNING">
          <i class='material-icons orange'>warning</i></span>
       {{warning.label}}
      </div>
     </mat-option>

    </mat-select>
    </mat-form-field>

但出于某种原因，当我尝试选择其中一个选项时，它也会显示图标文字：

我的变量中的值是正确的，在选择一些选项后，它只是一个显示问题。

我该如何解决？

Answer 1

使用font-awesome它已经解决了，因为我的图标中没有任何文字：

<span *ngIf="warning.label === WarningType.WARNING"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></span>