在 Angular Material 中使用 material 图标和 md-icon 2

Question

我无法让 md-icon 显示来自 Google Material 的图标。对于那些不需要太多说明的人，这里是代码，更多细节在代码之后。

app.component（这里我展示了我所有的主要成分，实际的md-icon在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 { }

Header 组件（我尝试调用 md-icon 的地方）：

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

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

这里是 css 和 html 根据 google 材料站点上使用图标的步骤：

CSS:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/MaterialIcons-Regular.eot");
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url("../fonts/MaterialIcons-Regular.woff2") format("woff2"), url("../fonts/MaterialIcons-Regular.woff") format("woff"), url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

HTML:

<html>

<head>
  <title>Boiler Plate</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="assets/styles/layout.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <!-- 2. Configure SystemJS -->
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app').catch(function(err) {
      console.error(err);
    });
  </script>
</head>
<!-- 3. Display the application -->

<body>
  <my-app>Loading...</my-app>
</body>

</html>

最初我没有收到任何错误，它只是将 md-icon 渲染为纯文本的 "home"。但是我想我错过了 MdIcon 的指令，所以我插入了它，现在我收到了这个错误 "No provider for MdIconRegistry!"。他们在他们的 docs 中谈论了一些关于 MdIconRegistry 的内容，但是从我阅读它的方式来看，如果您不想使用我确实想使用的标准 google 图标，您只需要.所以基本上我导入了组件，包含了指令，在我的索引中添加了 link，并将 css 代码添加到我的样式表中。根据我的阅读，它应该可以工作，但我显然遗漏了一些东西。

任何帮助将不胜感激，如果有人对与实际问题无关的代码有任何批评，请随时告诉我，我是 Angular 2 的新手，我可以使用所有建议我可以得到。

提前致谢。

Answer 1

来自documentation：

<!--
For Material Design Icons
The class '.material-icons' is auto-added if a style has NOT been specified
since `material-icons` is the default fontset. So your markup:
-->
<md-icon> face </md-icon>
<!-- becomes this at runtime: -->
<md-icon md-font-set="material-icons"> face </md-icon>
<!-- If the fontset does not support ligature names, then we need to use the ligature unicode.-->
<md-icon>  </md-icon>
<!-- The class '.material-icons' must be manually added if other styles are also specified-->
<md-icon class="material-icons md-light md-48"> face </md-icon>

Answer 2

好的，所以我找到了我遗漏的东西，它在文档中，我只是没有找对地方。在您的 main.ts 文件中，您需要导入 bootstrap HTTP_Providers，在您的组件内部，您需要导入 MdIcon 和 MdIconRegistry，并包含 MdIconRegistry 的提供程序。这一切意味着什么？很高兴你提出这个问题！

Main.ts之前：

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

bootstrap(AppComponent);

Main.ts 之后：

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

bootstrap(AppComponent, [
    HTTP_PROVIDERS
]);

header.component.ts之前：

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

可以在最底部找到图标的文档 here and the documentation that helped me can be found here。

Answer 3

此处正确答案：您必须正确设置项目。您没有以正确的方式导入图标。您只需导入图标和字体即可。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

您将其导入 html 中，仅此而已。你所做的一切都是一个奇怪的解决方法。

在 Angular Material 中使用 material 图标和 md-icon 2

Using material icons with md-icon in Angular Material 2

css

typescript

material-design

angular-material2

angular