Angular Material - matIcon in MatSelect

Question

I use this angular material select in my Angular 5 application:

<mat-form-field style="width:88%;">
    <mat-select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>
</mat-form-field>

On the select panel <mat-icon> are listed as expected but if I select one option then the home icon does not appear in <mat-form-field>

How could I also view the home icon in <mat-form-field> once selected?

Answer 1

This can be accomplished via the "mat-select-trigger" option. Documentation on the "mat-select" can be found here.

https://material.angular.io/components/select/api#MatSelectTrigger

Below should be a working example of what you are trying to do. Based on what you provided.

<mat-form-field style="width: 88%">
  <mat-select placeholder="Contact *" formControlName="contact">
    <mat-select-trigger>
      <mat-icon>home</mat-icon>&nbsp;{{ contact.institution }}
    </mat-select-trigger>
    <mat-option *ngFor="let contact of contacts" [value]="contact">
      <mat-icon [ngStyle]="{ color: contact.color }">home</mat-icon>{{ contact.institution }}
    </mat-option>
  </mat-select>
</mat-form-field>

And apply styles as necessary.

Answer 2

You can add a matPrefix to the form field:

<mat-form-field style="width:88%;">

    <span matPrefix style="margin-right: 8px;"><mat-icon>home</mat-icon></span>

    <mat-select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>

</mat-form-field>

If the icon is a property of each contact such as contact.icon then you will need to do a bit more work to bind the currently selected contact's icon property to the mat-icon name:

<mat-form-field style="width:88%;">

    <span *ngIf="select.value" matPrefix style="margin-right: 8px;"><mat-icon>{{select.value.icon}}</mat-icon></span>

    <mat-select #select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>

</mat-form-field>

Answer 3

I had the same issue, and I fixed by subscribing to the contact field of the reactive form, and then update the value of your object here is how.

My Template

<mat-form-field appearance="fill">
  <mat-label>Avatar</mat-label>
  <mat-select formControlName="avatar">
    <mat-select-trigger>
      <mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{user.avatar}}
    </mat-select-trigger>
    <mat-option *ngFor="let avatar of avatars" [value]="avatar">
      <mat-icon svgIcon="{{avatar}}"></mat-icon>{{avatar}}
    </mat-option>
  </mat-select>
</mat-form-field>

My TS Code

this.contactForm.get('avatar').valueChanges.subscribe((value) => {
  this.user.avatar = value;
});

and as you noticed I'm here updating the user object with the selected value, then

<mat-icon svgIcon="{{user.avatar}}"></mat-icon> 

will be updated by the selected avatar.