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

nuxt.config.js

// 省略
  vuetify: {
    customVariables: [], // 省略 
    theme: {}, // 省略 
    // ↓↓ ここから下を追記 ↓↓↓
    defaultAssets: {
      font: true,
      icons: 'md'
    },
    icons: {
      iconfont: 'md'
    }
  },