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

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 { }

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>


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>

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 {
}