使用角度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材质图标

回答

相关问题