Vue フレームワークVuetifyで使えるアイコン一覧サイトと使い方

Material Design Iconsというサイトがある。

ここから探す。（アイコンは英語で検索）

Material Design Icons

例えばごみ箱のアイコンならtrashと検索する。

好きなアイコンを選択すると、

import { mdiTrashCanOutline } from '[@mdi/js](https://www.npmjs.com/package/@mdi/js)';

こんな風に出てくる。

書き替え方

上記の例なら、

mdiTrashCanOutline

の大文字の前にハイフンを入れて、そのうえで小文字の表記に書き替えて使う。

↓書き換え後

mdi-trash-can-outline

↓Vuetify公式の説明　この説明でわかんのか…

v-icon
 コンポーネントは、アプリケーションのさまざまな側面にコンテキストを提供するために、グリフの大きなセットを提供します。 利用可能なすべてのアイコンの一覧については、公式の Material Design Icons
 ページをご覧ください。 これらのアイコンのいずれかを使用するには、単純に mdi-
プレフィックスに続いて アイコン名を使用します。

Vuetify - A Material Design Framework for Vue.js

使い方

ボタンとして使いたいならこんな感じになる。

<v-btn icon>
    <v-icon>mdi-trash-can-outline</v-icon>
</v-btn>