Question

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

<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团队没有提供任何特定的方法来执行此操作。您可以在此处another question进行类似的操作。

话虽如此，如果您考虑使用Emojis，则有一个轻巧的解决方法。您可以在Emojipedia上获得几乎所有Mat-icon的表情符号。

<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不会在选项之一上显示图标

1 个答案: