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.sstatic.net/MUVWb.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, Commented Dec 11, 2020 at 15:54

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

2

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.

answered Dec 11, 2020 at 16:10

JSON Derulo

18.8k11 gold badges62 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JSON Derulo Over a year ago

No problem, glad I could help you :)

app Over a year ago

@JSON ,I have one question in regards to the angular material table can you please help here. stackoverflow.com/questions/65347251/…

Collectives™ on Stack Overflow

Material Angular components doesn't load

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related