角度-动态自定义svgIcon只显示菜单中的第一个图标

Question

我正在尝试将svgIcons设置为mat-icon标签，但是angular会显示'home'上<mat-icon mat-list-icon svgIcon="{{ item.icon }}"></mat-icon>上的第一个svg图标*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>

现在，角度显示此列表，仅显示第一个图标home，这不是我希望看到的：

肯定我做得不好，非常感谢您的帮助。

Answer 1

以此替换HTML中的mat-icon行。

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

Answer 2

你做得很好，在我的应用程序中我和你一样并且工作。

svgIcon 用于自定义图标，如果您使用的是角度材质图标，只需在元素中添加图标名称

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

如果您想添加自定义图标，能否提供更多信息？控制台错误，如果您正在使用（以及如何）使用 MatIconRegistry 来注册您的自定义图标...