使用Vuetify/MDI图标库时图标无法显示的问题排查

以下是几个可能导致图标不显示的问题及对应解决方法：

• 图标集配置不匹配
  你当前导入的vuetify/iconsets/mdi是MDI字体图标版本，但你使用的@mdi/js是SVG路径格式，二者不兼容。需要替换为适配SVG的mdi-svg图标集：
  修改src/plugins/vuetify.ts：

  import "vuetify/styles";
  
  import { createVuetify } from "vuetify";
  // 替换为mdi-svg图标集
  import { aliases, mdi } from "vuetify/iconsets/mdi-svg"
  
  export default createVuetify({
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        mdi,
      },
    },
  });
  

• 未在Vue应用中注册Vuetify
  检查main.ts（或main.js）是否完成Vuetify的注册，缺失这一步会导致Vuetify组件和图标系统无法工作：

  import { createApp } from 'vue'
  import App from './App.vue'
  import vuetify from './plugins/vuetify'
  
  createApp(App)
    .use(vuetify)
    .mount('#app')
  

• 无效尺寸类导致图标异常
  你在v-icon上使用的h-25和w-25不是Vuetify的有效尺寸类（Vuetify尺寸类范围为1-12，或使用h-auto/w-auto），这类无效类可能导致图标被异常缩放或隐藏。建议删除这两个类，仅通过size属性控制尺寸：

  <v-icon :icon="mdiAccount" size="16" color="white"/>
  

• 颜色与背景冲突
  你设置了color="white"，如果<main>元素的背景也是白色，图标会因颜色重叠而不可见。可以临时将颜色改为color="black"进行测试，排除该问题。

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