Vuetify3でGoogle Material Iconsを使用する方法
今回はVuetify3でGoogle Material Iconsを使用する方法についてご紹介していきます。
Nuxt.jsのバージョンは3.11.2で、Vuetifyのバージョンは3.7.1です。
Vuetify3でGoogle Material Iconsを使用する方法
Vuetify2からVuetify3にバージョンアップを行ったときに、今まで使っていたGoogle Material Iconsを使用している箇所が表示されなくなってしまいました。
Material Design Iconsについてはmdiのプレフィックスをつければ表示されますが、Google FontのGoogle Material Iconsについては表示されません。
具体的には、例えばline_start_arrow_notchのGoogle Material Iconsを使用したかった場合に
|
1 |
<v-icon>line_start_arrow_notch</v-icon> |
という書き方でVuetify2では表示されましたが、Vuetify3では表示されなくなりました。
いろいろな解決策がありそうですが、私の場合はまずnuxt.config.jsに
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// nuxt.config.js export default defineNuxtConfig({ app: { head: { link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined:wght@100;200;300;400;500;600;700;800;900&display=swap', }, ], }, }, }) |
のようにGoogle Material Iconsを参照するように定義し、
|
1 |
<v-icon>line_start_arrow_notch</v-icon> |
の代わりに
|
1 |
<span class="material-icons">line_start_arrow_notch</span> |
のようにv-iconタグではなくspanタグを利用すると使いたいGoogle Material Iconsが表示されるようになりました。
他の方法として下記のようにplugins/vuetify.jsを編集してデフォルトアイコンセットとしてMaterial Iconsを設定する方法があるみたいですが、私の場合は表示が崩れたのでやめました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// plugins/vuetify.js import { createVuetify } from 'vuetify' import 'vuetify/styles' import { aliases, mdi } from 'vuetify/iconsets/mdi' import { md } from 'vuetify/iconsets/md' // Material Icons の設定を読み込み export default defineNuxtPlugin((nuxtApp) => { const vuetify = createVuetify({ icons: { defaultSet: 'md', // デフォルトアイコンを Material Icons に設定 sets: { md, // Material Icons のセットを使用 }, }, }) nuxtApp.vueApp.use(vuetify) }) |
ぜひご参考にしてみてください。
終わりに
今回はVuetify3でGoogle Material Iconsを使用する方法についてご紹介いたしました。