Material select with material-icons issue

Question

I want to add an icon to every option in my 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>

But for some reason when I try to select one of the option it shows also the icon text:

The value inside my variable is correct, it is only a display problem, after selecting some option.

How can I fix that?

Answer 1

With font-awesome it is solved because I don't have any text in the icon:

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