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