Vuetifyでv-iconが使えないのを解決する方法

2022-05-21

2019-08-16

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

オススメ本

Vuetify で v-icon が表示されないことがあったことがあったので、解決方法を記事にしました。

結論

アイコンによっては、使えなくなっている可能性があります。

<v-icon>mdi-plus-thick</v-icon>
<v-icon>mdi-account-box</v-icon>

こちらのコードで試してみてください。2022/5 段階では使えています。

また、以下のサイトのアイコンが使えます。

以下、流れとなります。

今回の記事では、

Vue.js を一番最初に触るときにめちゃめちゃ参考になった、Udemy の講座である

"}});

で、実際に手を動かしながらやっていました。

動画内では、

add vuetify

するだけで v-icon が使えていましたが、僕は使えませんでした。

アイコンの公式サイトです。

「mdi」は、Material Design Icon の略だそうです。

例えば、

account-box

というアイコンを使いたい時は、mdi-account-box というように mdi-を付け足すことによって使用することができます。

恐らく動画のアイコンがつかえなくなっていたと思われます。

<v-icon>mdi-plus-thick</v-icon>
<v-icon>mdi-account-box</v-icon>

こんな感じで表示されます。

このコードは、2022 年 5 月の時点で使えるので、一度このコードをコピペして使えるか確認してみて、もし使えなければ他の原因かもしれないです。

以上です。

誰かの参考になればと思います。

感想や質問あれば Twitter で DM していただければと思います。