Tagbangers Blog

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

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

Angular Material - Icon

Material Icons

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

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


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

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

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の公式サイトに解説がありますが、参考コードなどもなかったためかなり苦労しました。

https://material.angular.io/components/icon/overview#font-icons-with-css

https://material.angular.io/components/icon/api#MatIcon

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

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

以上です。