使用角度2材质图标

Question

我正在尝试使用角度材料2在我的网站上显示图标,但我有点困惑.

这是它应该如何工作,从材料2的github repo中的演示:

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>

页面加载时没有错误,但没有显示图标.什么可能出错？

Answer 1

要使用MdIcon,您需要包含相应的css文件.在您的代码中,您使用的是Material Icons谷歌的默认字体.

来自angular-material2 repo:

默认情况下,使用" 材质"图标字体.(您仍然需要包含HTML来加载字体及其CSS,如链接中所述).

简单地说,就像这样包含css index.html:

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

或者您可以选择官方回购中提到的任何其他导入方法:

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

Answer 2

值得知道的是,要使用分隔的图标空间(例如文件上传),我们需要使用下划线_.例如:

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

Answer 3

由于@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');
    }
}

Answer 4

在style.css里面复制并粘贴以下内容:---

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

并使用如下:

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

Answer 5

在带有@ angular / material 2.0.0-beta-7的angular 4.3.3中，您还需要清理URL。

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'));
    }
}