angular-material的mat-icon组件

API链接

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

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

就拿Font-Awesome来讲，一般是这样用<i class="fa fa-car"></i>,但我们想直接在<mat-icon></mat-icon>上用，只要以下几步即可。

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

<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">

即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了:

<mat-icon fontSet="fa" fontIcon="fa-sign-out"></mat-icon>

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

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

<mat-icon class="fa fa-user"></mat-icon>

一样能够使用。