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 i.e. 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 { }