材质图标问题的材质选择答案

【问题标题】：Material select with material-icons issue材质图标问题的材质选择
【发布时间】：2018-05-22 14:32:12
【问题描述】：

我想为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>

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

我的变量里面的值是正确的，只是选择了某个选项后显示的问题。

我该如何解决这个问题？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

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

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

【讨论】：