Zenn
🙄

VuetifyでMaterial Design Iconsを使用する手順

2023/08/22に公開
TypeScript
Vue 3
#
mdi
Vuetify 3
tech

前提

Vue3,Vuetify3,TypeScript,Vue Router,Piniaを使用
上記を既にインストール済みの状態で、アイコンを追加で使えるようにする。

MDI Fontsをインストール

ここではnpmを使う。yarnを使用したインストールも可能。

npm install @mdi/font -D

main.tsに追加

Vueのエントリーポイントにmdiを追加する。既にインストールされている拡張機能やライブラリは人によりけり。但しVuetifyはMDIを使用するためにインストール必須。

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
// vuetify(インストール済の前提)
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import '@mdi/font/css/materialdesignicons.css' //追加

const app = createApp(App)

const vuetify = createVuetify({
    components,
    directives,
    // 追加
    icons: {
      defaultSet: "mdi",
    },
    // ここまで追加
  });

app.use(createPinia())
app.use(router)
app.use(vuetify)

app.mount('#app')

アイコンの挿入

基本のアイコン表示

<v-icon aria-hidden="false">
   mdi-account
</v-icon>

ボタンやテキストエリアに組み込む

// ボタン
<v-btn
icon="mdi-plus"
size="large"
color="indigo"
class="right-fixed-button"
></v-btn>
// テキストエリア
<v-textarea
class="mx-2"
label="prepend-icon"
rows="1"
prepend-icon="mdi-comment"
></v-textarea>

参考

vuetify -Icon Fonts
vuetify -Textarea
vuetify -Button

Discussion