Problem creating sideNav Angular Material

Follow the steps and the tutorial on this page: sidenav

But I'm left like this:

That is to say, the icons or the menu options are not seen. This is my sidenav.component.ts file:

import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "side-nav",
  styleUrls: ["./sidenav.component.scss"],
  template: `
    <section [class.sidenav]="isExpanded">
      <div class="toggle">
        <mat-icon (click)="toggleMenu.emit(null)">
          {{ isExpanded ? "keyboard_backspace" : "dehaze" }}
        </mat-icon>
      </div>
      <mat-list class="nav" *ngFor="let route of routeLinks">
        <a
          mat-list-item
          routerLinkActive="active-link"
          class="hover"
          routerLink="{{ route.link }}"
        >
          <mat-icon
            mat-list-icon
            [matTooltip]="!isExpanded ? route.name :'home'",
            matTooltipPosition="right"
          >
            {{ route.icon }}</mat-icon
          >
          <p matLine *ngIf="isExpanded">{{ route.name }}</p>
        </a>
      </mat-list>
    </section>
  `,
})
export class SidenavComponent {
  @Input()
  isExpanded!: string;
  @Output() toggleMenu = new EventEmitter();

  public routeLinks = [
    { link: "home", name: "home", icon: "dashboard" },
    { link: "locations", name: "Locations", icon: "account_balance" },
  ];
}

The sidenav.component.scss file:

.sidenav {
    width: 250px;
  }
  
  .toggle {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 25px 0;
    &:hover {
      cursor: pointer;
    }
  }
  
  .nav {
    .active-link {
      background-color: #fafafa;
      border-left: solid 3px #1976d2;
    }
  
    .hover {
      transition-duration: 400ms;
      transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
      transition-property: transform, border, background-color;
    }
  
    mat-list-item,
    a {
      border: none;
      box-sizing: border-box;
      text-decoration: none;
      &:hover {
        cursor: pointer;
        background-color: #fafafa;
        border-left: solid 3px #1976d2;
      }
    }
    mat-icon {
      color: #1976d2;
    }
  }

And also apply the styles in the global style.css file:

html,
body {
 height: 100%;
}
body {
 margin: 0;
 font-family: Roboto, "Helvetica Neue", sans-serif;
}

// override material inline style to allow mini nav state
mat-sidenav[style] {
 visibility: visible !important;
}
.mat-drawer {
 transform: none !important;
}

This is my app.component.ts file:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  styles: [
    `
      .content-container {
        min-height: 100vh;
        box-sizing: border-box;
        padding: 25px;
      }
    `,
  ],
  template: `
    <mat-sidenav-container autosize>
      <mat-sidenav #sidenav fixedInViewport="true" mode="side" opened>
        <side-nav></side-nav>
      </mat-sidenav>
      <mat-sidenav-content>
        <div class="content-container">
          <button type="button" mat-button (click)="sidenav.toggle()">
            Toggle sidenav
          </button>
          <router-outlet></router-outlet>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>
  `,
})
export class AppComponent {
  title(title: any) {
    throw new Error('Method not implemented.');
  } 
   public isExpanded = false;

  public toggleMenu() {
    this.isExpanded = !this.isExpanded;
  }}

But I don't know what I'm doing wrong.