问题
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>
回答1:
You can get it done via the "mat-select-trigger" option.
<mat-select-trigger>
<mat-icon>pregnant_woman</mat-icon> {{gender.name}}
</mat-select-trigger>
More Documentation on mat-select-trigger.
回答2:
Complete code
<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>
<!-- MUST USE mat-select-trigger TO SHOW mat-icon -->
<mat-select-trigger *ngIf="gender.value === 'f'">
<mat-icon>pregnant_woman</mat-icon> {{gender.name}}
</mat-select-trigger>
</mat-select>
</mat-form-field>
来源：https://stackoverflow.com/questions/52351349/how-to-display-icon-inside-angular-material-select-mat-option-and-selection-of