Угловой: MatSelect с видимым MatIcon после выбора

Question

Сделать компонент Ярлыки

сделать выпадающий с иконками - все работает отлично

но после выбора одного из значений я увидел текст, а не значок

мой код:

*.ts

export class MarkComponent {
  @Input() control: MarkDTO = null;
  @Input() marks: MarkDTO[] = [];
  @Output() change: EventEmitter<MarkDTO> = new EventEmitter<MarkDTO>();
}

*.html

<mat-form-field>
  <mat-select placeholder="Метка" formControlName="control">
    <mat-select-trigger *ngIf="control">
      <mat-icon>home</mat-icon>&nbsp;{{control.name}}
    </mat-select-trigger>
    <mat-option [value]="null">
  <mat-icon [ngStyle]="{'color': 'white'}">home</mat-icon>&nbsp;Не выбрана
</mat-option>
    <mat-option *ngFor="let mark of marks" [value]="mark">
      <mat-icon [ngStyle]="{'color': mark.color}">home</mat-icon>&nbsp;{{mark.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

я видел это решение, но оно не помогло

результат:

нет ошибок в консоли

UPD:

Пример StackBlitz

Answer 1

Я нашел решение (без использования FormGroup)

Рабочий пример

если кому-то нужно решение для FormGroup - я могу помочь с этим