Angular Material – matIcon in MatSelect

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.