CODEWITHSUNDEEP
angularangular-material
antoniodela
antoniodela

Reputation: 51

Can't use MatIcon component

I have recently updated my project to Angular v6. I am trying to install Angular Material following this guide: Material guide for Angular

This is my app's module:

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
 declarations: [
   AppComponent,
   PruebaComponent
 ],
 imports: [
   ...
   MatButtonModule, 
   BrowserAnimationsModule,
   MatCheckboxModule
 ],

This is the html of a test component:

<h3>Fab Buttons</h3>
<div class="button-row">
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

However, I get this error:

compiler.js:215 Uncaught Error: Template parse errors:
'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

Upvotes: 1

Views: 7821

Answers (2)

user4676340
user4676340

Reputation:

If you want to use Material with Angular 6, you should rely on @angular/schematics, as explained in their blog.

simply run

ng add @angular/material

And Angular Material will be installed, set up, and you will have nothing to do.

And to use material components, follow @PardeepJain's answer.

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86800

You need to add MatIconModule in the app.module.ts in order to use in the project.

Try this -

import { MatIconModule } from '@angular/material';

@NgModule({
  declarations: []
  imports: [MatIconModule,....]
});

Upvotes: 3

Related Questions