如何在角形材质中显示图标选择< mat-option>并选择相同的 [英] How to display icon inside angular material select <mat-option> and selection of the same

问题描述

如何使用材质选择控件在选择下拉控件内正确显示图标.选择了mat选项后，其选择的图标文字以及如何解决此问题?

How to correctly display icon inside the select drop down control using material select control. After selecting mat option its selecting text of icon as well how to overcome this issue ?

            <mat-form-field>
                <mat-select formControlName="genderFormControl" placeholder="Gender">
                    <mat-option>None</mat-option>
                    <mat-option *ngFor="let gender of genders" [value]="gender.value">
                            <mat-icon matListIcon>pregnant_woman</mat-icon>
                            {{gender.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

推荐答案

您可以通过 "mat-select-trigger" 选项完成此操作.

You can get it done via the "mat-select-trigger" option.

  <mat-select-trigger>
      <mat-icon>pregnant_woman</mat-icon>&nbsp;{{gender.name}}
   </mat-select-trigger>

有关 mat-select-trigger.的更多文档.

More Documentation on mat-select-trigger.

这篇关于如何在角形材质中显示图标选择< mat-option>并选择相同的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！