【v-icon】の一覧を確認する方法と使い方 【Vuetify】

v-iconはvuetifyで使用できるアイコンです。
一覧を確認する方法と使い方をまとめました。

v-iconの一覧を確認する方法

v-iconの一覧は下記のサイトで確認することができます。
Material Design Icons.

アイコンを検索することで、下記の画像のように使用方法が出てきます。

v-iconの使い方

v-iconはケバブケースで記載する必要があるので、変換して使用します。

mdiSendCheck
↓
<v-icon>mdi-send-check</v-icon>

【v-icon】例

<v-icon>mdi-home</v-icon> #ホーム
<v-icon>mdi-account</v-icon> #アカウント
<v-icon>mdi-magnify</v-icon>　#拡大
<v-icon>mdi-dots-vertical</v-icon> #ドット縦
<v-icon>mdi-dots-horizontal</v-icon> #ドット横
<v-icon>mdi-send</v-icon> #送信
<v-icon>mdi-arrow-down</v-icon> #矢印
<v-icon>mdi-menu</v-icon> #メニュー
<v-icon>mdi-twitter</v-icon> #ツイッター
<v-icon>mdi-facebook</v-icon> #フェイスブック
<v-icon>mdi-instagram</v-icon> #インスタグラム
<v-icon>mdi-github</v-icon> #GitHub