使用 angular 2 material 个图标

Question

我正在尝试使用 angular material 2 在我的网站上显示图标，但我有点困惑。

这是它应该如何工作的，来自 material 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>

页面加载没有错误，但没有显示图标。可能出了什么问题？

Answer 1

为了使用MdIcon，您需要包含相应的css文件。在您的代码中，您使用的是 google.

中的默认字体 Material Icons

来自angular-material2 repo：

By default the Material icons font is used. (You will still need to include the HTML to load the font and its CSS, as described in the link).

简单地说，只需将 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

你还需要导入 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]
})

Answer 3

从 @ngModule 开始介绍 Angular RC5 语法如下：

应用示例-module.ts

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

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

export class AppExampleModule {
    //
}

应用示例-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

值得注意的是，要使用图标 space 分隔（例如文件上传），我们需要使用下划线 _ 。例如：

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

Answer 5

在 style.css 中复制并粘贴以下内容：---

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

并像这样使用：

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

Answer 6

在带有@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'));
    }
}

Answer 7

就是这个方法，我试过了，有效。

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

实例 mdIconRegistry 将通过 DI 可用，并使用 addSvgIcon 方法添加自定义 svg。然后在模板中使用 <md-icon svgIcon="slider">。

Answer 8

工作 offline/local（从您的服务器提供 css）：

npm 安装material-design-icons --保存
在 src/styles.css 添加 @import "~material-design-icons/iconfont/material-icons.css";

Answer 9

只需在 index.html

上添加以下行

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

使用 angular 2 material 个图标

Using angular 2 material icons

angular-material

angular