Пользовательский значок материала, показывающий то же самое для каждого экземпляра

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>