BuefyでMaterial Design Iconsを使う

はじめに

Buefyは、BulmaをベースにしたVue.js向けUIライブラリです。

Buefyはアイコンを利用できるのですが、ドキュメントにはCDNからダウンロードする方法しか記載されていません。
ここではnpm(or yarn)でinstallしたMaterial Design Iconsのアイコンを使うときの手順を紹介します。

環境

Node.js v12.13.1
vue-cli v4.4.1

アプリケーションの雛形を作って、Buefyをインストールする

$vue create my-app # オプションは自由に
$cd my-app
$npm install buefy

アプリの雛形ができたら、Buefyを使えるようにします。

main.js

import Vue from 'vue';
import Buefy from 'buefy';
import App from './App.vue';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Material Design Iconsをインストールする

$npm i @mdi/font

main.js

import Vue from 'vue';
import Buefy from 'buefy';
import App from './App.vue';
import 'buefy/dist/buefy.css';

// 追加
import '@mdi/font/css/materialdesignicons.css';

Vue.use(Buefy);

まとめ

これでアイコンを使えるようになりました。
チートシートを見るとmdi-が先頭についていますが、コンポーネントのiconプロパティには不要です。
mdi-をつけるとアイコンが表示されません。

MyComponent.vue

<template>
  <section>
    <b-button icon-left="github">Add</b-button>
    <b-icon icon="home"></b-icon>
  </section>
</template>