Material custom icon showing same for each instance - angular-material

Question

I have an app where I'm using custom svg icons using Materials 'MatIconRegistry'.
The import works fine, but a strange thing is happening when I have multiple icons on a page. For some reason, any icons that following an initial icon end up bing the same as the first, even though they are clearly labeled as another icon.
When I comment out the initial icon, the next instance changes to the one being called by that instance, but then all the following icons then change to that icon.
What could be causing this?
Here is the code:
<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>