Vuetifyでアイコンが表示されない問題の解決方法

Vuetifyでアイコンが表示されない問題の解決方法
     

Laravelに導入したVue + Vuetifyでアイコンが表示されなかったので、対処法をメモします。

LaravelにVuetifyを導入する手順は別の記事を参照のこと。

Vuetifyでアイコンを使用する際のTipsになるので、Laravelに関係なく有効です。

事象

LaravelにVuetifyを導入し、App-barコンポーネントを使ってみた所、以下のようにバー(上部の黒いヘッダ)のアイコンが表示されない。

Vuetifyの公式リファレンスは以下を参照しました。

解決

アイコンのインストールが必要でした。

インストール手順

CDNでもローカルインストールでも可能のようですが、今回はローカルインストールで進めます。
プロジェクトのルートディレクトリで以下コマンドを実行

npm install @mdi/font -D

Laravelインストール時に作成したプラグインファイルに以下を追記。

アイコンのCSSのインポート

import '@mdi/font/css/materialdesignicons.css'

Vuetifyにアイコンを使用することを定義

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

コンパイル(Laravel Mixでのコンパイルコマンド)

npm run dev

修正後

上記修正後、確認するとアイコンが表示されています。

JavaScriptカテゴリの最新記事