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

angular, angular-material2, typescript

Solution

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>

Problem

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: - If 'md-icon' is an Angular component, then verify that it is part of this module. - 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?

Original source