使用角度2材质图标
使用角度2材质图标
提问于 2016-05-13 01:32:42
我正在尝试使用angular material 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>页面加载时没有错误，但没有显示任何图标。会出什么问题呢？
回答 6
Stack Overflow用户
发布于 2016-12-11 05:38:19
值得知道的是，要使用图标空格分隔(例如，文件上传)，我们需要使用下划线_。例如：
<md-icon>file_upload</md-icon>Stack Overflow用户
发布于 2016-12-20 17:51:32
在style.css中复制并粘贴以下内容：
@import "https://fonts.googleapis.com/icon?family=Material+Icons";并像这样使用：
<md-icon>menu</md-icon>
^--- icon nameStack Overflow用户
发布于 2017-08-27 07:30:00
在angular 4.3.3中，使用@angular/material 2.0.0-beta-7，你还需要清理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'));
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37193810
复制相关文章
相似问题