Angular Material 6でFont Awesomeを利用してアイコンを表示する

Angular Materialでは<mat-icon>を使用することでMaterial Iconsを簡単に利用することができます。

利用する際はindex.htmlでスタイルシートを読み込むことを忘れないよう注意してください。

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

しかしMaterial Iconsは種類が少なく、欲しいアイコンがない場合があります。

そんな時はFont Awesomeが便利です。

かなりの種類のアイコンが揃っており、基本的に無料で利用することができます。

有償のPro版では各アイコンの見た目の違うバージョンが利用できます。

Angular MaterialでFont Awesomeを利用する方法

今回は一番下の方法を説明します。

1. NPMでパッケージをインストールする

npm install @fortawesome/fontawesome-free

2. style.scssにフォントのスタイルをインポートする

@import "~@fortawesome/fontawesome-free/css/all.css";

この手順で利用できるようになります。

<mat-icon fontSet="fa" fontIcon="fa-home" inline></mat-icon>

fontSetでFont Awesomeを指定します。

fontIconで表示するアイコンを指定します。Material Iconsとは違ってここにアイコン名を書きます。

アイコン名は「fa-アイコン名」で指定します。

inlineを指定することで、アイコンサイズなどを自動で調節してくれます。

アイコンサイズはMaterial Iconsと比べるとやや小さいため、スタイルでfont-sizeを調整するといい感じで表示できます。

Angular Materialの公式サイトに解説がありますが、参考コードなどもなかったためかなり苦労しました。

公式サイトでは「MatIconRegistry.registerFontClassAlias」を使用すると書かれていましたがうまく表示ができませんでした。

最終的に今回のやり方で表示はできましたが、公式のやり方でうまく表示するやり方がわかる方はコメントをください（^人^）

以上です。