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', }, })
起動するとアイコンが表示されるようになった。