AngularでBootstrap iconsを利用する

BootstrapのiconをAngularで使うための方法を試してみました。
Angularで使いやすくするためのライブラリは特にないようですが、なくても簡単に使えます。
1,500以上のアイコンが使えて、SVGやアイコンフォントでの表示のどちらでも利用できます。

ドキュメント: Bootstrap Icons
GitHub: Bootstap Icons

インストール方法

公式サイトに記載されているとおり、npmでインストールできます。2022/3/11時点の最新は、1.8.1です。

npm install bootstrap-icons@1.8.1 --save

アイコンフォントで使用

AngularのStyleをSCSSにしている場合は、styles.scssにimport設定します。

styles.scss

/* Importing Bootstrap Icons SCSS file. */
@import '~bootstrap-icons/font/bootstrap-icons';

Alarmアイコンの表示してみます。
html
サイズと色を指定してみます。

<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

表示

SVGスプライトで使用

SVGのスプライトを使う場合は、svgファイルをassetsに設定します。

angular.json
スプライトの場合は、bootstrap-icons.svgを取り込みます。

            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "bootstrap-icons.svg",
                "input": "./node_modules/bootstrap-icons/",
                "output": "."
              }
            ],

この場合、buildすると、dist直下にコピーされます。

html

    <svg class="bi" width="2rem" height="2rem" fill="cornflowerblue">
      <use xlink:href="/bootstrap-icons.svg#alarm"/>
    </svg>

表示

その他、個々のSVGファイルを使いたい場合は、assetsの記述を変えるだけで、svgファイルをコピーでき、useのhrefの先を変えるだけです。

所感

使い方はすごくシンプルでした。また、アイコンの種類も多く、デザインもシンプルなので扱いやすいです。
ちょっとした使い方であれば、アイコンが楽だと思います。大きくアイコンを表示したい場合は、SVGを使った方が綺麗に出せると思います。