Angular - динамический кастомный svgIcon, просто показываю первый значок из моего menuList

Question

Я пытаюсь установить svgIcons в тег mat-icon, но angular показывает первый значок SVG 'home' в <mat-icon mat-list-icon svgIcon="{{ item.icon }}"></mat-icon> из *ngFor="let item of menuList".

В моем файле машинописи есть следующий menuList:

menuList: MenuItem[] = [
  { name: this.text1, icon: 'home' }, // <- only shows this icon
  { name: this.text2, icon: 'user-check' },
  { name: this.text3, icon: 'users' },
  { name: this.text4, icon: 'briefcase' },
  { name: this.text5, icon: 'feather' },
  { name: this.text6, icon: 'eye' },
  { name: this.text7, icon: 'message-circle' },
  { name: this.text8, icon: 'settings' }
];

HTML:

<mat-drawer mode="side" opened class="example-drawer">
  <mat-nav-list>
    <mat-list-item (click)="onRowClicked(item)" *ngFor="let item of menuList">
      <mat-icon mat-list-icon svgIcon="{{ item.icon }}"></mat-icon>
      <h4 matLine>{{ item.name }}</h4>
      <mat-divider></mat-divider>
    </mat-list-item>
  </mat-nav-list>
</mat-drawer>

и пока angular показывает этот список, беря только первую иконку home, что я не надеюсь увидеть:

определенно я делаю что-то плохое, я был бы очень признателен за вашу помощь.

Answer 1

Замените строку мат-значок в HTML этим.

 <mat-icon mat-list-icon>{{item.icon}}</mat-icon>