Angular – MatIconModule import/export

I am working on Angular 4 project with Angular Material.

I have this screen, where I used to have Material Cards and Material Icons.

I just handle the import/export of MatCardModule. The card is display, fine. And I add a Material Icon. The icon is display too, however I don't handle the import/export of MatIconModule.

Here is a plunker: https://plnkr.co/edit/UOxDkqmWjg0uu5QNrl7c?p=preview

main.ts file :

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {MatCardModule} from '@angular/material';
import {CardOverviewExample} from './card-overview-example';

@NgModule({
declarations: [CardOverviewExample],
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule
],
exports: [
    MatCardModule
],
bootstrap: [CardOverviewExample]
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

card-overview-example.ts file :

import {Component} from '@angular/core';

@Component({
selector: 'card-overview-example',
template: `
    <mat-card>Simple card</mat-card>

    <mat-icon class="material-icons" aria-hidden="true">
        important_devices
    </mat-icon>
`
})
export class CardOverviewExample {}

I don't need Material Cards anymore, so I comment the declaration in HTML file and imports/exports of the module.

My code is break. Errors in console say that mat-icon is not a know element.

Here is a plunker: https://plnkr.co/edit/UvhxpOkOWhaMKX2tkb7A?p=preview

main.ts file :

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
//import {MatCardModule} from '@angular/material';
import {CardOverviewExample} from './card-overview-example';

@NgModule({
declarations: [CardOverviewExample],
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //MatCardModule
],
exports: [
    //MatCardModule
],
bootstrap: [CardOverviewExample]
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

card-overview-example.ts file :

import {Component} from '@angular/core';

@Component({
selector: 'card-overview-example',
template: `
    <!-- <mat-card>Simple card</mat-card> -->

    <mat-icon class="material-icons" aria-hidden="true">
        important_devices
    </mat-icon>
`
})
export class CardOverviewExample {}

Yes, of course. If I handle the import/export of MatIconModule, the icon is display, fine.

Here is a plunker: https://plnkr.co/edit/Mn12NIuES35G2xOB0CrA?p=preview

main.ts file :

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {MatIconModule} from '@angular/material';
import {CardOverviewExample} from './card-overview-example';

@NgModule({
declarations: [CardOverviewExample],
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule
],
exports: [
    MatIconModule
],
bootstrap: [CardOverviewExample]
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

card-overview-example.ts file :

import {Component} from '@angular/core';

@Component({
selector: 'card-overview-example',
template: `
    <!-- <mat-card>Simple card</mat-card> -->

    <mat-icon class="material-icons" aria-hidden="true">
        important_devices
    </mat-icon>
`
})
export class CardOverviewExample {}

But why I didn't need the handle of import/export MatIconModule while I use MatCardModule ?