Mat-select 不显示 select 选项之一的图标

Question

我正在实施带有图标选项的 select 输入，但是当 select 选择其中一个选项时，图标将显示为文本。

<mat-form-field>
  <mat-select MatInput [(ngModel)]="element.gender" [value]="element.gender">   
    <mat-option value="Male">
        <mat-icon>home</mat-icon> Home
    </mat-option>
    <mat-option value="Female">
        <mat-icon>face</mat-icon> Face
    </mat-option>
  </mat-select>
</mat-form-field>

我也尝试将选项值设置为 [value]="'Male'"，但没有成功。

这是一个Stakblitz 可编辑Stakblitz

Answer 1

Angular 团队没有提供任何具体的方法来做到这一点。您可以在此处查看类似内容。

话虽这么说，但如果您考虑使用表情符号，则有一种轻量级且非常简单的解决方法。您可以在 Emojipedia.

上获取几乎所有垫子图标的表情符号

<p>
  It must shows the icon near by the selected option, budoesn't!n't !
</p>
<mat-form-field>
    <mat-select MatInput [(ngModel)]="element.gender" [value]="element.gender"> 
        <mat-option [value]="'Male'">
             Home
        </mat-option>
        <mat-option value="Female">
             Face
        </mat-option>
    </mat-select>
</mat-form-field>

You might want to check for its support though.

Mat-select 不显示 select 选项之一的图标

Mat-select doesn't show the icons on select one of the options

typescript

angular-material2

angular