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

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>

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"; // <----- Hereimport { 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 { }

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.e.g.

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