AngularでFont Awesomeを利用する

Angularで使うためのライブラリが公式で公開されている。
ドキュメント: Angular | Font Awesone
GitHub: angular-fontawesome

インストール方法

ng addコマンドでインストールが出来る。(npmでの方法はGitHub参照)
2022/03/10時点の最新版である0.10.1をインストールする。
インストール時にどの種類のフォントをインストールかを選択する。ここではFreeのSolid, Regular, Brandsの3つを選択する。

ng add @fortawesome/angular-fontawesome@0.10.1

The package @fortawesome/angular-fontawesome@0.10.1 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Choose Font Awesome icon packages you would like to use: (Press <space> to select, <a> t
o toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Free Solid Icons
❯◉ Free Regular Icons
 ◉ Free Brands Icons
 ◯ Pro Solid Icons    [ Requires: https://fontawesome.com/pro ]
 ◯ Pro Regular Icons  [ Requires: https://fontawesome.com/pro ]
 ◯ Pro Light Icons    [ Requires: https://fontawesome.com/pro ]

? Choose Font Awesome icon packages you would like to use: Free Solid Icons, Free Regular 
Icons, Free Brands Icons
UPDATE package.json (1516 bytes)
UPDATE src/app/app.module.ts (557 bytes)
✔ Packages installed successfully.

この時点で、app.module.tsにFontAwesomeModuleが自動的に追加される。
package.jsonには以下が追加される。Font Awesomeは5.15.4がインストールされた。

    "@fortawesome/angular-fontawesome": "^0.10.1",
    "@fortawesome/fontawesome-svg-core": "~1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",

使用方法

component側であらかじめ表示するアイコンを定義する必要があり、ちょっと面倒です。
すべて、表示はSVG形式で行われます。

Regularの表示

coffeeを表示します。

tsファイル

import { faCoffee } from '@fortawesome/free-regular-svg-icons';

icon = faCoffee;

Htmlファイル

<fa-icon [icon]="icon"></fa-icon>

表示

Solidの表示

使い方は、regularと同じです。
importが'@fortawesome/free-solid-svg-icons'になります。

Brandの表示

FacebookやTwitterのアイコンなどブランドのアイコンが表示出来ます。
使い方は同じで、importが'@fortawesome/free-brands-svg-icons'になります。

所感

Angularでも対応しているのは素直に嬉しい。
ただ、htmlだけで済まないのがちょっと残念です。
あと、Free版では、使えるアイコンの種類が限られていて、サイトでアイコンを探しても使えないことが多いのが残念です。