Выбор материала с выпуском значков материалов

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>