材质自定义图标在每个实例中显示相同

Question

我有一个应用程序，其中我在“材料”中使用自定义svg图标“ MatIconRegistry”。

导入工作正常，但是当我在页面上有多个图标时，发生了一件奇怪的事情。出于某种原因，即使在初始图标之后的任何图标也都清楚地标记为另一个图标，但最终还是与第一个图标相同。

当我注释掉初始图标时，下一个实例将更改为该实例正在调用的图标，但是随后所有随后的图标都将更改为该图标。

可能是什么原因造成的？

代码如下：

<mat-sidenav-container>
  <mat-sidenav mode="side" opened="true" class="app-sidenav">
    <div class="logo-wrapper">
      <img
        class="menu-logo"
        alt="Avocado"
        src="./assets/logo.png"
      />
    </div>
    <div>
      <div class="menu-item">
        <a
          class="menu-button"
          routerLink="/"
          mat-button
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
        >
          <div>
            <mat-icon svgIcon="dashboard"></mat-icon>
          </div>
          <div class="button-label">
            Dashboard
          </div>
        </a>
      </div>
      <div class="menu-item">
          <a
            class="menu-button"
            routerLink="/sessions"
            mat-button
            routerLinkActive="active"
          >
          <div>
            <mat-icon svgIcon="sessions"></mat-icon>
          </div>
          <div class="button-label">
            Sessions
          </div>
        </a>
      </div>
      <div class="menu-item">
          <a
            class="menu-button"
            routerLink="/users"
            mat-button
            routerLinkActive="active"
          >
          <div>
            <mat-icon svgIcon="users"></mat-icon>
          </div>
          <div class="button-label">
            Users
          </div>
        </a>
      </div>
    </div>

  </mat-sidenav>
  <mat-toolbar class="app-toolbar">
    <h2 class="page-title">{{pageTitle}}</h2>
  </mat-toolbar>

  <router-outlet></router-outlet>

</mat-sidenav-container>