【Vue.js】 Vuetifyのv-iconが表示されない時の対処方法
Vuetifyを正しくインストールされているのに、アイコンだけ表示されない。
少し困って調べ、解決しましたので対処方法を記載します。
Vuetifyを正しくインストールされているのに、アイコンだけ表示されない。
少し困って調べ、解決しましたので対処方法を記載します。
前提知識
VuetifyはMaterial Design Icons、Material Icons、Font Awesome 4とFont Awesome 5がサポート対象で、デフォルトはMaterial Design Iconsとなっています。
今回はMaterial Design Iconsを例に記載しています。
その他のアイコンフォントを使用する方も、対処方法はほぼ変わりません。
アイコンフォントのインストールやCDNが違うので、以下サイトをご確認ください。
手順
アイコンフォントを読み込み、指定するだけで解決します。
コード
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi'
},
})
アイコンフォントを追加
アイコンフォントの追加は以下2種類あります。
CDNでインクルード
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
ローカル依存としてインストール
$ yarn add @mdi/font -D
$ npm install @mdi/font -D
