Material Angular components doesn't load

Question

I'm currently running a new project using Angular and Material

EDIT : Here is a stackblitz : https://stackblitz.com/edit/angular-ivy-tzxfxr?file=src/app/app.component.html

I'm trying to makes the example of the toolbar, but here is the results :

https://i.imgur.com/LG57QZI.png

I try to put the example code into the app.component.html :

<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>


<router-outlet></router-outlet>

And the app.component.ts :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'OpenCaptureForInvoices';
}

To import the Material module I have a app-material.module.ts file

import { MatToolbarModule } from '@angular/material/toolbar';
@NgModule({
    imports: [
        MatToolbarModule,
        MatButtonModule,
        MatIconModule
    ],
    exports: [
        MatToolbarModule,
        MatButtonModule,
        MatIconModule
    ]
})
export class AppMaterialModule { }

This last file is included into the app.module.ts

Did I do something wrong ?

Can you set up a stackblitz? Otherwise it is hard to reproduce the error... — JSON Derulo

JSON Derulo JSON Derulo · Accepted Answer · 2020-12-11T16:10:09

The problem is that the icons are not loading. This is because you didn't include the Material icon font to your project.

Add this to your index.html:

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

See also the Angular Material documentation how to setup the project properly.

Material Angular components doesn't load

1 Answers