Vue2项目中Vuetify配置mdi后图标显示为斜体文本如何修复

我刚新建了一个集成Vuetify的Vue2项目，添加了导航栏等若干组件。

目前发现页面图标未正常渲染，反而显示为斜体文本，查看浏览器控制台、网络请求标签页均未发现报错。
请问该问题如何修复？是否需要在src/main.js中补充引入相关配置？

已尝试的配置 #

src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify({
    icons: {
        iconfont: 'mdi' // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
    }
})

修复方法 #

问题根源是在Vuetify配置中指定使用mdi图标库，但未在项目中引入对应图标库的样式资源，浏览器无法加载图标字体，就会把图标代码渲染为斜体文本。

按以下步骤操作即可修复：

• 安装MDI图标库依赖
  在项目根目录执行对应包管理工具的安装命令：

# npm用户执行
npm install @mdi/font -D

# yarn用户执行
yarn add @mdi/font -D

• 在入口文件引入图标样式
  打开src/main.js，添加样式引入语句，同时确认Vuetify实例已正确挂载到Vue实例上，参考完整配置：

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
// 引入MDI图标样式
import '@mdi/font/css/materialdesignicons.css'

Vue.config.productionTip = false

new Vue({
  // *必须传入vuetify实例*，否则配置不生效
  vuetify,
  render: h => h(App)
}).$mount('#app')

配置完成后重启项目开发服务，图标即可正常渲染。

补充说明：如果后续需要切换为其他图标库（如Font Awesome、Material Design官方图标），除了修改vuetify.js中的iconfont字段，也必须对应引入目标图标库的资源文件，否则会复现同类问题。

内容的提问来源于stack exchange，提问作者code-8