Vue3+Vuetify全新安装后MDI图标无法显示问题求助

问题场景 #

使用Vite创建Vue3项目并集成Vuetify后，添加图标按钮代码：

<v-btn icon>
    <v-icon>mdi-export</v-icon>
</v-btn>

按钮可正常触发hover效果，但图标无法显示。已执行以下操作：

• 创建项目与安装依赖：

  npm create vue@latest
  npm i --save vuetify
  

• 安装MDI图标包：

  npm install --save material-design-icons-iconfont
  

• 配置Vuetify图标集（main.js）：

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

解决步骤 #

• 正确引入MDI字体CSS
  安装material-design-icons-iconfont后，需在main.js中导入其CSS文件，确保图标字体能被加载：

  import 'material-design-icons-iconfont/dist/material-design-icons.css'
  

• 补全Vuetify图标集导入
  确保已从Vuetify中正确导入MDI图标集的配置项，修改main.js：

  import { createVuetify } from 'vuetify'
  import * as components from 'vuetify/components'
  import * as directives from 'vuetify/directives'
  import { aliases, mdi } from 'vuetify/iconsets/mdi' // 导入MDI图标集
  import 'material-design-icons-iconfont/dist/material-design-icons.css'
  
  const vuetify = createVuetify({
      components,
      directives,
      icons: {
          defaultSet: 'mdi',
          aliases,
          sets: {
            mdi,
          },
      },
      ssr: true,
  })
  

  若缺少上述aliases和mdi的导入，图标集无法被Vuetify识别。

• 验证图标名称有效性
  确认mdi-export是MDI图标库中存在的有效名称，避免因拼写错误导致图标不显示。

• 清理缓存并重新构建
  执行以下命令清理项目缓存，确保资源正常加载：

  rm -rf node_modules/.cache # 或根据项目使用的包管理器清理缓存
  npm run dev
  

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