带有材料图标问题的材料选择 [英] Material select with material-icons issue

问题描述

我想在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.

我该如何解决?

推荐答案

使用font-awesome可以解决该问题，因为我的图标中没有任何文本:

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>

这篇关于带有材料图标问题的材料选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！