1
Google材質のアイコンを表示するのにmd-iconを取得できません。多くの展覧会を必要としない人にはコードがあります。詳細はコードの後にあります。角材2のmd-iconで材質アイコンを使用
app.component（私は私の主なコンポーネントのすべてを表示する場合は、実際のMD-アイコンがheader.componentである）：（IはMD-アイコンを呼び出そう）
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 { }
ヘッダーコンポーネント：
CSS：
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 { }
、ここでは、そのアイコンを使用するためのGoogleの素材サイトの手順に従って、CSSとhtmlです
@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-アイコンをレンダリングされたすべてのエラーを取得していませんでした。しかし、私はMdIconのディレクティブが欠けていたと思うので、それを挿入しました。このエラーは "MdIconRegistryのプロバイダがありません！"というメッセージが表示されます。彼らはdocsのMdIconRegistryについて少し話しますが、あなたが使用したい標準のGoogleアイコンを使用したくない場合は、私がそれを読んでいるところからあなたが必要とするだけです。基本的に、コンポーネントをインポートし、ディレクティブを含め、インデックスにリンクを追加し、CSSコードをスタイルシートに追加しました。私が読んだことから、それはうまくいくはずですが、私は明らかに何かが欠けています。
実際の質問とは無関係のコードに関する批判があれば、私にお知らせください。私はAngular 2の新機能です。私は得ることのできるすべてのアドバイスを使用できます。
ありがとうございます。 documentationから
ドキュメントへのリンクが死んでいます:( –