Vuetifyでアイコンが表示されない

Vuetifyを使ったアプリケーションを作ろうとしている。

公式サイトのGetting-Startページを参照し、 google contactsレイアウトを選び動作させることまではできた。

だが、アイコンが表示されない。

アイコン表示されない場合は、 アイコン関係のCSSが読み込めていないことが原因だ。

Vuetifyのアイコンは GoogleのMaterial Iconsライブラリを使用している。

以下のページにインストール方法が記載してあったため実行 Icons — Vuetify.js

インストールコマンド

npm install material-design-icons-iconfont -D

importでcssを読み込むように指定

// src/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',
  },
})

起動するとアイコンが表示されるようになった。