Angular Material icons not showing

I am trying to implement an offline web application based on Angular Material (v.18.2.x) but I cannot see the icons. Here is my implementation:

package.json

[...]
 "dependencies": {
    "@angular/animations": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/cdk": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/material": "^18.1.0",
    "@angular/router": "^18.1.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.5.0",
    "zone.js": "~0.14.0"
  }
[...]

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, RouterOutlet } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { routes } from './app/app.routes';
import { SidebarComponent } from './app/components/sidebar/sidebar.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, SidebarComponent],
  templateUrl: './main.html',
  styleUrl: './main.scss',
})
export class App {}

bootstrapApplication(App, {
  providers: [
    provideRouter(routes),
    provideAnimations()
  ]
});

global_styles.css

@import '@angular/material/prebuilt-themes/indigo-pink.css';

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
[...]

HTML file

<mat-cell *matCellDef="let user">
  <button mat-icon-button [routerLink]="['/users', user.id]">
    <mat-icon fontIcon="visibility"></mat-icon>
  </button>
</mat-cell>

Result

Output

I have tried including some dependencies, import MatIconModule or import into main.scss some icon dependencies, but without success

Make sure you have imported the font for material icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Then you should have the import present for MatIconModule.

@Component({
  selector: 'icon-overview-example',
  templateUrl: 'icon-overview-example.html',
  imports: [MatIconModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconOverviewExample {}

The HTML will look like below.

<mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="home"></mat-icon>

Finally, when using Angular Material 18 you should ensure you have the new style of defining a theme for angular material.

@use '@angular/material' as mat;

body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}

html {
  height: 100%;
}

Stackblitz Demo