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

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

来自angular-material2 repo：

默认使用Material icons font。（您仍然需要包含HTML来加载字体及其CSS，如链接中所述）。

简单地说，只需在<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">中加入css就像这样：

CommandInvokationFailure: Unable to install APK to device. Please make sure the Android SDK is installed and is properly configured in the Editor. See the Console for more details. 
C:/Users/Cristina.GrstLightning/AppData/Local/Android/sdk\platform-tools\adb.exe -s "LG-E973-1c8ab70a" install -r "C:\Users\Cristina.GrstLightning\Documents\New Unity Project\Temp\StagingArea\Package.apk"

stderr[
158 KB/s (851968 bytes in 5.242s)
- waiting for device -
]
stdout[
rm failed for -f, No such file or directory

]
UnityEditor.Android.Command.Run (System.Diagnostics.ProcessStartInfo psi, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit, System.String errorMsg)
UnityEditor.Android.ADB.RunInternal (System.String[] command, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit, System.String errorMsg)
UnityEditor.Android.ADB.Run (System.String[] command, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit, System.String errorMsg)
UnityEditor.Android.AndroidDevice.Exec (System.String[] command, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit, System.String errorMsg)
UnityEditor.Android.AndroidDevice.Install (System.String apkfile, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit)
UnityEditor.Android.PostProcessAndroidPlayer.UploadAndStartPlayer (System.String manifestName, System.String stagingArea, UnityEditor.Android.AndroidDevice device, System.String packageName, Boolean developmentPlayer, Boolean retryUpload)
UnityEditor.Android.PostProcessAndroidPlayer.PostProcessInternal (System.String stagingAreaData, System.String stagingArea, System.String playerPackage, System.String installPath, System.String companyName, System.String productName, BuildOptions options, UnityEditor.RuntimeClassRegistry usedClassRegistry)
UnityEditor.Android.PostProcessAndroidPlayer.PostProcess (BuildTarget target, System.String stagingAreaData, System.String stagingArea, System.String playerPackage, System.String installPath, System.String companyName, System.String productName, BuildOptions options, UnityEditor.RuntimeClassRegistry usedClassRegistry)
UnityEditor.HostView:OnGUI()

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

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

Answer 2

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

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

Answer 3

从import { MdIconModule, MdIconRegistry } from '@angular2-material/icon'; @NgModule({ imports: [ MdIconModule ] providers: [ MdIconRegistry ] }) export class AppExampleModule { // }开始，从Angular RC5开始，语法如下：

应用-示例-module.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'); } }

应用-示例-component.ts

{{1}}

Answer 4

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

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

并使用如：

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

Answer 5

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

Answer 6

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

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

Answer 7

这就是方法，我尝试过并且有效。

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

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

Answer 8

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

即可

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

Answer 9

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

使用角度2材质图标

9 个答案: