使用角度2材質圖標

我正嘗試使用角度材質2在我的網站上顯示圖標，但我有點困惑。使用角度2材質圖標

這是它應該如何在材料2的GitHub庫工作，從演示：

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

我一直在試圖使用它，但沒有圖標顯示在所有。

這是我如何設置它：

app.component.ts

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

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None, 
    viewProviders: [MdIconRegistry], 
    directives: [MdIcon], 
}) 
export class MyComponent{ 
    constructor(private router: Router, 
       private JwtService:JwtService, 
       mdIconRegistry: MdIconRegistry){ 
    mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg') 
    } 
}

和模板..

<md-icon>home</md-icon>

該頁面加載，沒有錯誤，但沒有圖標被顯示。出了什麼問題？

來源

2016-05-12 TheUnreal

您是否調查了生成的DOM。它看起來怎樣？ –

對不起@GünterZöchbauer，我不明白你是什麼意思。 – TheUnreal

打開瀏覽器devtools並檢查結果DOM的外觀。我猜'icon-demo'也可以在網上找到。您可以比較應用程序中圖標的DOM和演示中的圖標的DOM。也許它提供了一些提示，可能會出現什麼問題。 –

要使用MdIcon，您需要包含相應的css文件。在你的代碼中，你使用的默認字體是Material Icons。

從angular-material2 repo：

默認情況下，Material icons font使用。（您仍然需要包含HTML來加載字體和CSS，如鏈接中所述）。

簡單，只包括像這樣的index.html的CSS：

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

或者你可以選擇在官方回購進口提及的任何其他方法：

http://google.github.io/material-design-icons/#icon-font-for-the-web

來源

2016-05-13 02:04:36 Abdulrahman

這是否仍然適用於單一的'@角/材料'？ – redfox05

@ redfox05是的，我更新了答案中的文檔鏈接。 – Abdulrahman

如果您正在使用某種類型的自動重新加載/編譯，如angular-cli（ng serve），請記住取消服務並重新啓動服務 – Dazag

-4

你也需要導入Http。

import {HTTP_PROVIDERS} from '@angular/http'; 
import {MdIcon, MdIconRegistry} from '@angular2-material/icon'; 
@Component({ 
    template:`<md-icon>code</md-icon>` 
    directives:[MdIcon], 
    providers: [HTTP_PROVIDERS, MdIconRegistry] 
})

來源

2016-08-10 21:00:20

請你再解釋一下嗎？隨着新的NgModule API，這似乎不正確... –

這隻適用於與Angular RC 4 –

作爲@ngModule介紹從角RC5語法開始將是如下：

APP-示例-module.ts

import { MdIconModule, MdIconRegistry } from '@angular2-material/icon'; 

@NgModule({ 
    imports: [ 
     MdIconModule 
    ] 
    providers: [ 
     MdIconRegistry 
    ] 
}) 

export class AppExampleModule { 
    // 
}

APP-示例-component.ts

@Component({ 

    selector: 'app-header', 
    template: `<md-icon svgIcon="close"></md-icon>` 
}) 


export class AppExampleComponent 
{ 
    constructor(private mdIconRegistry: MdIconRegistry) { 
     mdIconRegistry 
      .addSvgIcon('close', '/icons/navigation/ic_close_36px.svg'); 
    } 
}

來源

2016-10-18 19:19:39 user991

我的男人，這就是我一直在尋找！作爲一個人頭，你可以從@ angular/material現在導入 – jemiloii

值得一提的是，要使用分隔的圖標空間（例如文件上傳），我們需要使用下劃線_。例如：

<md-icon>file_upload</md-icon>

來源

2016-12-10 21:38:19 Milso

好的建議，但是這不能回答這個問題。 – isherwood

絕對有用的感謝Milso，它沒有任何地方用下劃線代替空格。 –

裏面的樣式。CSS複製並粘貼以下：---

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

和使用，如：

<md-icon>menu</md-icon> 
      ^--- icon name

來源

2016-12-20 09:51:31

在角4.3.3與@角/材料2.0.0-β-7還需要消毒網址。

import { DomSanitizer } from '@angular/platform-browser'; 

export class AppComponent 
{ 
    constructor(
     private domSanitizer: DomSanitizer, 
     private mdIconRegistry: MdIconRegistry) { 
     mdIconRegistry.addSvgIcon('twitter', domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/twitter.svg')); 
    } 
}

來源

2017-08-26 23:30:00 mkaj

這是這樣，我試過了，它的工作原理。

mdIconRegistry.addSvgIcon('slider', sanitizer.bypassSecurityTrustResourceUrl('./assets/controls/slider.svg'));

實例mdIconRegistry將可通過DI和使用addSvgIcon方法添加自定義SVG。然後在您的模板中使用<md-icon svgIcon="slider">。

來源

2017-12-07 03:43:20

使用角度2材質圖標

回答

相關問題