angular-material的mat-icon组件

API链接

angular-material是angular的一套UI框架。

其中mat-icon组件默认是使用Google的icon集,但出于某种原因或需要,我们可能会想要用其它的icon集,那应该怎么做呢?

就拿Font-Awesome来讲,一般是这样用,但我们想直接在上用,只要以下几步即可。

首先,肯定要在index.html中加入如下代码:


即font-awesome的连接,那么接下来在对应的组件导入MatIconModule和MatIconRegistry,其中MatIconRegistry是一个services,按照service用法如下调用mat-icon的API即可添加font-awesome:

export class AllMaterialUIModule {
    constructor(private matIconRegistry: MatIconRegistry) {
        this.matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
    }
}

那么后面就可以这样引用font-awesome的icon了:


这样就可以正确使用font-awesome的icon库了。

其实说这么多,通过类样式来引用某个icon,来的更简洁:


一样能够使用。

你可能感兴趣的:(angular-material的mat-icon组件)