How to display icon inside angular material select <mat-option> and selection of the same

11
votes

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>

enter image description here

enter image description here

2
angularangular-material2
did it solve the issue - Sajeetharan
No. I tried but its not displaying selected value at all. - Mark Macneil Bikeio
Is there by any chance a fix for out there? I am currently running into the exact same problem - Chund

2 Answers

7
votes

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>

More Documentation on mat-select-trigger.

1
votes

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>&nbsp;{{gender.name}}
        </mat-select-trigger>
    </mat-select>
</mat-form-field>