Vuetify 3中v-icon无法显示 需适配原Vuetify 2使用方式

问题背景 #

之前基于Laravel 9、Vue 2.6和Vuetify 2开发的应用中，v-icon及输入框的append-icon功能正常，示例代码：

<v-icon color="black" large @click="closeDialog()">
    mdi-arrow-left
</v-icon>

<v-textarea
    v-model.trim="commentText"  
    label="Write a comment.."
    append-icon="mdi-send"
>
</v-textarea>  

迁移至Laravel 10、Vue 3和Vuetify 3后，v-icon完全无法显示且无控制台报错，当前使用的v-icon代码：

<v-icon>mdi-cog</v-icon>
<v-icon> mdi-calendar</v-icon>
<v-icon> mdi-access-point </v-icon>
<v-icon> mdi-star </v-icon>

目前临时方案是通过@jamescoyle/vue-icon结合svg-icon实现：

<v-icon
    size="36"
    color="black"
    large
>
    <svg-icon
        type="mdi"
        size="36"
        :path="mdiArrowLeft"
    ></svg-icon>
</v-icon>

当前resources/js/app.js配置：

import './bootstrap';
import { createApp } from 'vue';

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
 directives,
})


const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);

app.use(vuetify).mount('#app');

解决方案 #

1. 安装Material Design Icons字体包 #

Vuetify 3不再默认内置MDI字体，需手动安装：

npm install @mdi/font

2. 引入MDI样式文件 #

修改resources/js/app.js，添加MDI字体样式的导入：

import './bootstrap';
import { createApp } from 'vue';

import 'vuetify/styles'
// 新增：导入MDI字体样式
import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
 directives,
})


const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);

app.use(vuetify).mount('#app');

3. 配置Vuetify默认图标集（可选） #

在创建Vuetify实例时指定默认图标集为MDI，简化后续图标使用：

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi',
  },
})

4. 修正v-icon使用方式 #

Vuetify 3中v-icon用法和Vuetify 2基本一致，注意两点：

• 图标名称前后不要带多余空格（如去掉 mdi-calendar中的前置空格）
• 直接使用图标名称即可，无需额外嵌套其他组件

正确用法示例：

<v-icon color="black" large @click="closeDialog()">mdi-arrow-left</v-icon>

<v-textarea
    v-model.trim="commentText"  
    label="Write a comment.."
    append-icon="mdi-send"
>
</v-textarea>

5. 重新编译资源 #

执行编译命令更新前端资源：

npm run dev

完成以上步骤后，v-icon和输入框的append-icon即可恢复Vuetify 2中的正常显示效果。

内容的提问来源于stack exchange，提问作者user761100