Vue.jsでMaterial Iconsを使えるようにする

概要

Vue.jsでMaterial Iconsを使うときに毎回使い方を忘れるので、備忘も兼ねて利用方法をまとめました。

ライブラリのインストール

まずはMaterial Icons用のライブラリをインストールします。

yarn add vue-material-design-icons

コンポーネントとしてインポート

Material Design Iconsから利用したいアイコンを探してインポートします。
ファイル名はパスカルケースで宣言。

ex) account-tie -> AccountTie.vue

hoge.vue

import KabbadiIcon from 'vue-material-design-icons/Kabaddi.vue';

components: {
  KabbadiIcon,
},

templateで利用

templateでコンポーネントとして宣言することで利用できます。
公式リポジトリに使えるpropsの説明とかがあります。

hoge.vue

<kabaddi-icon />

参考

• 公式リポジトリ
• アイコン一覧