Значки 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>

Когда я запускаю код, он отображает значок «приборная панель» для всех элементов в массиве, как это. Проверить снимок экрана

Что я пропустил?

решено: проблема связана с идентификатором изображения svg.Идентификатор изображения был одинаковым для всех svgs.изменив их на уникальные идентификаторы, решил проблему.