Angular Material icons not showing

I am trying to implement a 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

Continue reading...