角材质svg图标显示所有实体相同的图标

Question

我已将svg图标注册到我的棱角材质项目中。但对于所有图标，它将显示我注册的第一个图标。这是我的代码。

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
  iconRegistry.addSvgIcon('dashboard', sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/home.svg'));
  iconRegistry.addSvgIcon('bill', sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/bill.svg'));
  iconRegistry.addSvgIcon('ticket', sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/ticket.svg'));
}

prepareNavItems(): void {
  this.navItems = [];
  let roles: string[] = this.keycloakService.getUserRoles();
  this.navItems.push({
    name: 'Dashboard',
    icon: 'dashboard',
    route: 'dashboard',
  });
  if (roles.includes("billing")) {
    this.navItems.push({
      name: 'Billing',
      icon: 'bill',
      route: 'billing',
    });
  }
  if (roles.includes("ticketing")) {
    this.navItems.push({
      name: 'Ticketing',
      icon: 'ticket',
      route: 'ticketing',
    });
  }
}

<a *ngFor="let navItem of navItems" mat-list-item [routerLink]="[navItem.route]" routerLinkActive="mat-list-item-focus">
  <mat-icon svgIcon="{{navItem.icon}}"></mat-icon> {{navItem.name}}
</a>

运行代码时，它将为数组中的所有项目显示“仪表板”图标，如下所示。 Chek the Screenshot

我错过了什么？

已解决：问题出在svg图片ID上。所有svg的图片ID均相同。通过将它们更改为唯一ID即可解决问题。