How to display icon inside angular material select <mat-option> and selection of the same
10,085
Solution 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.
Solution 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>
Related videos on Youtube
Author by
Rahul Uttarkar
Updated on September 15, 2022Comments
-
Rahul Uttarkar over 1 year
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>
-
Rahul Uttarkar over 5 yearsNo. I tried but its not displaying selected value at all.
-
Chund about 3 yearsIs there by any chance a fix for out there? I am currently running into the exact same problem
-
-
PhoonOne over 2 yearsHow are you displaying gender.name inside mat select trigger?