[英]Using material icons with md-icon in Angular Material 2
我無法獲得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 { }
標頭組件(我嘗試在其中調用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的指令,所以我插入了該指令,現在我收到此錯誤“沒有MdIconRegistry的提供者!”。 他們在文檔中談到了MdIconRegistry,但是從我閱讀的方式來看,如果您不想使用我想使用的標准google圖標,則只需要它們。 因此,基本上我導入了組件,包括了指令,在索引中添加了鏈接,並將CSS代碼添加到了樣式表中。 從我閱讀的內容來看,它應該可以工作,但顯然我缺少一些東西。
我們將不勝感激,如果有人對與實際問題無關的代碼有任何批評,請隨時告訴我,我對Angular 2還是陌生的,我可以使用我所能獲得的所有建議。
提前致謝。
好的,所以我找到了我所缺少的東西,那是在文檔中,而我並沒有找到正確的地方。 在main.ts文件內部,您需要導入和引導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 { }
此處的正確答案:您必須正確設置項目。 您沒有以正確的方式導入圖標。 除了導入圖標和字體,您無需執行任何操作。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
您將其導入到html中,僅此而已。 您所做的一切都是一個怪異的解決方法。
從文檔中 :
<!--
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.