首页 文章

使用角度2材质图标

提问于
浏览 次
19

我正在尝试使用角度材料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>

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

angular angular-material

9 回答

  • 15

    值得知道的是，要使用分隔的图标空间（例如文件上传），我们需要使用下划线_ . 例如：

    <md-icon>file_upload</md-icon>
    回复于
  • 10

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

    来自angular-material2 repo：

    默认情况下，使用“材质”图标字体 . （您仍然需要包含HTML来加载字体及其CSS，如链接中所述） .

    简单地说，只需在_746821中包含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

    回复于
  • 29

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

    app-example-module.ts

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

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

export class AppExampleModule {
    //
}

    app-example-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');
    }
}
    回复于
  • 1

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

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

    并使用像：

    <md-icon>menu</md-icon>
          ^--- icon name
    回复于
  • 12

    在角度4.3.3中使用@ angular / material 2.0.0-beta-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'));
    }
}
    回复于
  • -4

    脱机工作/本地工作（从服务器提供css）：

    • npm install material-design-icons --save
      在src / styles.css中
    • 添加 @import "~material-design-icons/iconfont/material-icons.css";
    回复于
  • 0

    这是方式，我试过，它的工作原理 .

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

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

    回复于
  • 0

    只需在index.html上添加以下行

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

    您还需要导入 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]
})
    回复于

相关问题