Material Design IconsとMaterial Iconsは別物
今回の記事はマテリアルデザインアイコンとマテリアルアイコンを同じものと思っていたせいで
デフォルトのMaterial Design Iconsが設定されているのにも関わらず
<v-icon>create</v-ivon>
などと書いて表示されない現象に悩まされて居たので書いてみました!
「いや、書いてあるやん?アホかww」
と思われた方は読む必要の無い記事です。
Material Design Icons
まず初めにVuetifyのデフォルトで設定されている
Material Design Iconsはmdi-
接頭辞を付けるとデフォルトで使えるアイコンです。
下記の中から選んで使えます
https://materialdesignicons.com/
Material Icons
次にデフォルトでは使えませんが接頭辞無しで使えるアイコンです
下記の中から選んで使えます
https://material.io/resources/icons/?style=baseline
設定方法は下記にリンクを貼っておきます
Material Iconsのインストール
mdi
接頭辞のアイコンは段階的に廃止される??
For question: Why not just delete all the mdi icons and css defined as new icons are already offered by google, isn't it?
I got answer: Because that would suddenly break all the user implementations, so this way it can be phased out gradually, giving people time to update their icons.
あまり詳しくはわからないのですが何やら段階的に廃止されるようなことが書かれていました。
詳しい方がいらっしゃいましたらコメントで教えていただけると幸いです。
Nuxt.jsとVuetifyでMaterial Iconsを導入
最後にNuxt.jsで導入してみたいと思います。
参考にしたのはこちらのNuxtのVuetify ModuleのGitHubのREADMEです。
nuxt-community/vuetify-module
// 省略
vuetify: {
customVariables: [], // 省略
theme: {}, // 省略
// ↓↓ ここから下を追記 ↓↓↓
defaultAssets: {
font: true,
icons: 'md'
},
icons: {
iconfont: 'md'
}
},