Vuetify 2.x でiconが表示されない / cannot show icons using Vuetify(2.x)


Vuetify 2.x でiconが表示されない

Vuetify 2系で mdi iconが使えない場合
(<v-icon>mdi-xxx</v-icon>のような場合)
以下のpackageをインストールしてmdi iconを有効化することで解決します。

When you cannot use icons in Vue project which uses Vuetify 2.x
(like <v-icon>mdi-xxx</v-icon>),
you can solve it by adding some packages.

npmの場合 / When using npm

npm
$ npm install @mdi/js file-loader material-design-icons-iconfont --save-dev

yarnの場合 / When using yarn

yarn
$ yarn add @mdi/js file-loader material-design-icons-iconfont -D

vuetify.jsでロードします (load in Vuetify.js)

vuetify.js
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

That's it!