MatIconModule 가져 오기/내보내기

Question

각도 재료로 각도 4 프로젝트에서 작업 중입니다.

나는이 화면에서 Material Cards와 Material Icon을 가지고있었습니다.

방금 ​​MatCardModule의 가져 오기/내보내기를 처리합니다. 카드는 괜찮아요. 그리고 Material Icon을 추가합니다. 아이콘도 표시되지만 MatIconModule의 가져 오기/내보내기는 처리하지 않습니다.

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

내가 필요하지 않은 재료 카드 더 이상 : https://plnkr.co/edit/UOxDkqmWjg0uu5QNrl7c?p=preview

main.ts 파일 :

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); 

카드 개요 - example.ts 파일 여기

는 plunker입니다 , 그래서 나는 HTML 파일의 선언과 모듈의 imports/exports에 주석을 달았다.

내 코드가 잘못되었습니다. 콘솔의 오류는 mat-icon이 잘 모르는 요소라고합니다. https://plnkr.co/edit/UvhxpOkOWhaMKX2tkb7A?p=preview

main.ts 파일 :

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); 

카드 개요 - example.ts 파일 :

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

예, 물론 여기

는 plunker이다. MatIconModule의 가져 오기/내보내기를 처리하면 아이콘이 잘 표시됩니다. https://plnkr.co/edit/Mn12NIuES35G2xOB0CrA?p=preview

main.ts 파일 :

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); 

카드 개요 - example.ts 파일 : 여기

는 plunker입니다

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

하지만 내가 필요하지 않은 이유 MatCardModule을 사용하는 동안 가져 오기/내보내기 MatIconModule 핸들?

Answer 1

이제는 각도 5로 수정됩니다. 이제 MatIconModule을 가져와야합니다.