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

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

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

試行錯誤してみた。

2020.03.21

Laravel6.xでVuetifyを導入する手順を解説

https://trialanderror.jp/laravel-6-x-vuetify/

以前、Laravel6.xにVueを導入する手順を解説しました。Vueを使うからにはリッチなデザインを簡単に使えるVuetifyも使いたい、ということで、導入してみたので手順をシェアします。といってもVueが導入できていれば、かなり簡単に使えるようになります。環境この記事...

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

事象

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

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

vuetifyjs.com

App-bar component — Vuetify.js

https://vuetifyjs.com/ja/components/app-bars/

The app bar component is a supercharged toolbar with advanced scrolling techniques and application layout support.

解決

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

vuetifyjs.com

アイコン — Vuetify.js

https://vuetifyjs.com/ja/customization/icons/#install-material-icons

インストール手順

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

修正後

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