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>