Css 在“角度材质2”中使用材质图标和md图标

我无法获取md图标以显示来自Google Material的图标。对于那些不需要太多解释的人，这里是代码，更多细节在代码后面

app.component当我显示所有主要组件时，实际的md图标位于header.component中：

import { Component } from '@angular/core';
import { HeaderComponent } from './shared/header.component';
import { ContentComponent } from './shared/content.component';
import { FooterComponent } from './shared/footer.component';

@Component({
    selector: 'my-app',
    template: `<div id="wrapper">
    <header></header>
    <content></content>
    <footer></footer>
  <div>`,
     directives: [HeaderComponent, ContentComponent, FooterComponent]
})
export class AppComponent { }

HTML:

最初，我没有收到任何错误，只是简单地将md图标以纯文本形式呈现为主页。但是，我认为我缺少MdIcon的指令，所以我插入了该指令，现在我收到了这个错误：MdIconRegistry！没有提供程序！。他们在他们的网站上谈论了一点MdIconRegistry，但从我阅读的方式来看，如果你不想使用标准的谷歌图标，你只需要它，我确实想使用。所以基本上我导入了组件，包含了指令，在索引中添加了链接，并在样式表中添加了css代码。从我所读到的来看，它应该是有效的，但我显然遗漏了一些东西

任何帮助都将不胜感激，如果任何人对代码有任何与实际问题无关的批评，请随时让我知道，我对Angular 2非常陌生，我可以利用我能得到的所有建议

提前感谢。

来自：

从：

---

好吧，我找到了我丢失的东西，它在文件里，我只是没有找对地方。在main.ts文件内，需要导入和引导HTTP_提供程序；在组件内，需要导入MdIcon和MdIconRegistry，以及包含MdIconRegistry的提供程序。这一切意味着什么？我很高兴你这么问

Main.ts之前：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

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

@Component({
    selector: 'header',
    template: `<md-icon>home</md-icon>`,
    directives: [MdIcon]
})
export class HeaderComponent { }

Main.ts之后：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS } from '@angular/http';

bootstrap(AppComponent, [
    HTTP_PROVIDERS
]);

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

@Component({
    selector: 'header',
    template: `<md-icon>home</md-icon>`,
    directives: [MdIcon],
    providers: [MdIconRegistry]
})
export class HeaderComponent { }

header.component.ts之前：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

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

@Component({
    selector: 'header',
    template: `<md-icon>home</md-icon>`,
    directives: [MdIcon]
})
export class HeaderComponent { }

header.component.ts之后：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS } from '@angular/http';

bootstrap(AppComponent, [
    HTTP_PROVIDERS
]);

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

@Component({
    selector: 'header',
    template: `<md-icon>home</md-icon>`,
    directives: [MdIcon],
    providers: [MdIconRegistry]
})
export class HeaderComponent { }

---

图标的文档可以找到，帮助我的文档可以在最下面找到。

好的，我找到了我缺少的东西，它在文档中，我只是找不到正确的地方。在main.ts文件内，需要导入和引导HTTP_提供程序；在组件内，需要导入MdIcon和MdIconRegistry，以及包含MdIconRegistry的提供程序。这一切意味着什么？我很高兴你这么问

Main.ts之前：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

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

@Component({
    selector: 'header',
    template: `<md-icon>home</md-icon>`,
    directives: [MdIcon]
})
export class HeaderComponent { }

Main.ts之后：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS } from '@angular/http';

bootstrap(AppComponent, [
    HTTP_PROVIDERS
]);

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

@Component({
    selector: 'header',
    template: `<md-icon>home</md-icon>`,
    directives: [MdIcon],
    providers: [MdIconRegistry]
})
export class HeaderComponent { }

header.component.ts之前：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

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

@Component({
    selector: 'header',
    template: `<md-icon>home</md-icon>`,
    directives: [MdIcon]
})
export class HeaderComponent { }

header.component.ts之后：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS } from '@angular/http';

bootstrap(AppComponent, [
    HTTP_PROVIDERS
]);

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

@Component({
    selector: 'header',
    template: `<md-icon>home</md-icon>`,
    directives: [MdIcon],
    providers: [MdIconRegistry]
})
export class HeaderComponent { }

---

图标的文档可以在最下面找到，帮助我的文档可以在最下面找到。

正确回答：您必须正确设置项目。您没有以正确的方式导入图标。除了导入图标和字体，你什么都不用做

---

您可以在html中导入此内容，而不导入其他内容。你做的每件事都是一个奇怪的变通方法

此处回答正确：您必须正确设置项目。您没有以正确的方式导入图标。除了导入图标和字体，你什么都不用做

---

您可以在html中导入此内容，而不导入其他内容。你做的每件事都是一个奇怪的变通方法

文档来自Angular Material 1，问题是Angular Material 2，这是我的错，尽管我将其标记为Angular-material2和Angular Material。我将删除棱角材质标签，抱歉造成混淆。为了以防万一，我尝试了你的建议，但没有运气。文档来自于Angle Material 1，问题是Angle Material 2，这是我的错，尽管我将其标记为Angle-material2和Angle Material。我将删除棱角材质标签，抱歉造成混淆。我确实试过你的建议，只是以防万一，运气不好