Angular2 material 'md-icon' is not a known element

Question

I have angular2 application which is using @angular2-material 2.0.0-alpha.8-2 version. Everything works fine. Now I decided to upgrade material version to latest ie 2.0.0-alpha.9-3. I followed steps mentioned in GETTING_STARTED . Earlier I had imported individual modules as below:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....  

However change log of 2.0.0-alpha.9-3 version says:

"Angular Material has changed from @angular2-material/... packages to a single package under @angular/material . Along with this change, there is a new NgModule, MaterialModule , that contains all of the components."

So I removed explicitly imported material modules and changed it to:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....

After this change I am getting following error

'md-icon' is not a known element:

1. If 'md-icon' is an Angular component, then verify that it is part of this module.
2. If 'md-icon' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Do I need to import individual modules explicitly or as mentioned in change log MaterialModule contains all components and I should not explicitly import individual modules? If I shouldn't import individual modules then what could be source of error?

Answer 1

What about the export section? Did you provide MaterialModule there?

@NgModule({
  imports: [
    MaterialModule.forRoot()
  ],
  exports: [
    MaterialModule
  ]
})

Remember to provide icon styles in your index.html:

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

After that you should be able to use icons in your views:

<md-icon>delete</md-icon>

Answer 2

You need to import MatIconModule in app.module.ts and add it to your imports array in the same file.

Like this for example:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { TreeModule } from "angular-tree-component";
import { HttpClientModule } from "@angular/common/http";

import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon"; // <----- Here

import { EclassService } from "./services/eclass.service";

import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { AsyncTreeComponent } from "./components/async-tree/async-tree.component";


@NgModule({
  declarations: [
    AppComponent,
    AsyncTreeComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, TreeModule, HttpClientModule, MatButtonModule, MatIconModule // <--- HERE
  ],
  providers: [EclassService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

if you load a child module like this:

{path: 'childModule', loadChildren: 'app/child/child.module#childModule'}

then in child module, you have to import MaterialModule again. eg

@NgModule({
    imports: [
        sharedModules,
        childRouting,
        MaterialModule.forRoot()
    ],
    declarations: [
    ],
    providers: []
})
export class childModule {
}

Answer 4

Add

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

to index.html

and <i class="material-icons">delete</i> instead of <md-icon>delete</md-icon>

Answer 5

Two steps to use mat-icon:

1. insert this into index.html file.

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

2. insert this line into app.module.ts file. If performing lazy loading then include it in that module or in sharedModule.

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

Answer 6

The solution is adding md-icon, md-input, etc modules and style sheet.

You would also need to add CUSTOM_ELEMENTS_SCHEMA as below in app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

then add

providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

Answer 7

Add this to index.html:

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

and add to app.module.ts file this:

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

imports: [MatIconModule]