Angular 使用mdIcon时从控制台获取错误

Angular在使用mdIcon时抛出错误。代码如下：

import {Component} from '@angular/core';
import {MdIcon} from '@angular2-material/icon';
@Component({
    selector: 'my-app',
    template: `
    <md-toolbar>
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>`,
    directives: [MdIcon,MdToolbar],

})
export class AppComponent {} 

从'@angular/core'导入{Component}；
从“@angular2材料/图标”导入{MdIcon}；
@组成部分({
选择器：“我的应用程序”，
模板：`
菜单
默认工具栏
代码
`,
指令：[MdIcon，MdToolbar]，
})
导出类AppComponent{}

错误：

原始异常：MdIconRegistry没有提供程序！ 错误：DI异常 在NoProviderError.BaseException[作为构造函数]（exceptions.ts:14） 在NoProviderError.AbstractProviderError[作为构造函数]（reflective_exceptions.ts:53） 在新的NoProviderError（反射性_例外。ts:85） 在ReflectiveInjector_u.u throwOrNull处（ReflectiveInjector.ts:844） 在ReflectiveInjector_u.\u getByKeyDefault（ReflectiveInjector.ts:873）处 在ReflectiveInjector_u.u getByKey（反射式喷油器ts:835）处 在ReflectiveInjector_uu.get处（反射式喷油器ts:632） 在element injector.get（element_injector.ts:19） 在DebugAppView.\u View\u AppComponent0.createInternal（AppComponent.template.js:141）上 在DebugAppView.AppView.create上（view.ts:110）

---

有谁能帮我这里做错了什么吗？

你需要在

提供者

或

视图提供者

中列出它，并注册一些图标或图标集

import {Component, ViewEncapsulation} from '@angular/core';
import {MdIcon} from '@angular2-material/icon';

@Component({
    selector: 'my-app',
    template: `
    <md-toolbar>
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>`,
    directives: [MdIcon,MdToolbar],
    viewProviders: [MdIconRegistry],
})
export class AppComponent {
    constructor(mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
            .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
            .registerFontClassAlias('fontawesome', 'fa');
    }
}

从'@angular/core'导入{Component，ViewEncapsulation}；
从“@angular2材料/图标”导入{MdIcon}；
@组成部分({
选择器：“我的应用程序”，
模板：`
菜单
默认工具栏
代码
`,
指令：[MdIcon，MdToolbar]，
viewProviders:[MdIconRegistry]，
})
导出类AppComponent{
构造函数（mdIconRegistry:mdIconRegistry）{
mdIconRegistry
.addSvgIcon（'thumb-up'，'/demo-app/icon/assets/thumbup-icon.svg'））
.AddSvgIConSetNamespace（'core'，'/demo-app/icon/assets/core-icon-set.svg'））
.registerFontClassAlias（'FontAware'，'fa'）；
}
}

导入Http。 拜访

从'@angular/HTTP'导入{HTTP_PROVIDERS}；
从“@angular2 material/icon”导入{MdIcon，MdIconRegistry}；
@组成部分({
模板：
菜单
默认工具栏
代码
`,
指令：[MdIcon]，
提供者：[HTTP_提供者，MdIconRegistry]
})

使用材料alpha 8-4更新2.0.0版本：

您需要在app.modules.ts文件中包含

MdIconRegistry

作为提供程序。以下是一个功能示例：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { MdButtonModule } from '@angular2-material/button';
import { MdButtonToggleModule } from '@angular2-material/button-toggle';
import { MdCardModule } from '@angular2-material/card';
import { MdCheckboxModule } from '@angular2-material/checkbox';
import { MdGridListModule } from '@angular2-material/grid-list';
import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';
import { MdInputModule } from '@angular2-material/input';
import { MdListModule } from '@angular2-material/list';
import { MdMenuModule } from '@angular2-material/menu';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdProgressCircleModule } from '@angular2-material/progress-circle';
import { MdRadioModule } from '@angular2-material/radio';
import { MdSidenavModule } from '@angular2-material/sidenav';
import { MdSliderModule } from '@angular2-material/slider';
import { MdSlideToggleModule } from '@angular2-material/slide-toggle';
import { MdTabsModule } from '@angular2-material/tabs';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdTooltipModule } from '@angular2-material/tooltip';

import { AppComponent } from './app.component';


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,

        MdButtonModule,
        MdButtonToggleModule,
        MdCardModule,
        MdCheckboxModule,
        MdGridListModule,
        MdIconModule,
        MdInputModule,
        MdListModule,
        MdMenuModule,
        MdProgressBarModule,
        MdProgressCircleModule,
        MdRadioModule,
        MdSidenavModule,
        MdSliderModule,
        MdSlideToggleModule,
        MdTabsModule,
        MdToolbarModule,
        MdTooltipModule
    ],
    providers: [
        MdIconRegistry
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

---

别忘了安装hammerjs+打字并添加

import'hammerjs'添加到main.ts文件。
要使用标准图标，只需将字体放入html中即可（最简单的解决方案就是将CDN用于字体）：


其他方法在文档中描述：

此外，您还需要（与任何其他材料包一样）将材料模块到模块配置放入导入
 您应该能够在app.module.ts中导入MaterialRootModule：

import { MaterialModule } from '@angular/material';
@NgModule({
  imports: [
    MaterialModule.forRoot(),
  ],
})

此变量“MdIconRegistry”来自何处？此变量将于开始工作。谢谢，它帮助了我，但不要忘记导入HttpModule。感谢您的评论：）HttpModule的导入就在那里。还是我错过了什么。。。
import { MaterialModule } from '@angular/material';
@NgModule({
  imports: [
    MaterialModule.forRoot(),
  ],
})