6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vuetifyのiconでmdi接頭辞を付けても表示されないのはマテリアルアイコンとマテリアルデザインアイコンを混同しているから?

Posted at

Material Design IconsとMaterial Iconsは別物

今回の記事はマテリアルデザインアイコンとマテリアルアイコンを同じものと思っていたせいで
デフォルトのMaterial Design Iconsが設定されているのにも関わらず
<v-icon>create</v-ivon>などと書いて表示されない現象に悩まされて居たので書いてみました!

「いや、書いてあるやん?アホかww」
と思われた方は読む必要の無い記事です。

スクリーンショット 2020-04-09 14.00.05.png

Material Design Icons

まず初めにVuetifyのデフォルトで設定されている
Material Design Iconsmdi-接頭辞を付けるとデフォルトで使えるアイコンです。

下記の中から選んで使えます
https://materialdesignicons.com/

スクリーンショット 2020-04-09 13.42.25.png

Material Icons

次にデフォルトでは使えませんが接頭辞無しで使えるアイコンです

下記の中から選んで使えます
https://material.io/resources/icons/?style=baseline

設定方法は下記にリンクを貼っておきます
Material Iconsのインストール

スクリーンショット 2020-04-09 13.45.32.png

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'
    }
  },

6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?