求助：Vuetify图标无法正常显示（附项目配置代码）

问题情况 #

采用插件方式配置Vuetify的Vue3项目中，蓝色导航栏区域的mdi-home图标未正常显示，实际效果如下：

相关配置代码 #

package.json #

{
  "dependencies": {
    "@mdi/js": "^7.3.67",
    "@vue/eslint-config-typescript": "^12.0.0",
    "axios": "^1.6.0",
    "eslint": "^8.53.0",
    "eslint-plugin-vue": "^9.18.1",
    "pinia": "^2.1.7",
    "sass": "^1.69.5",
    "typescript": "^5.2.2",
    "vite-plugin-vuetify": "^1.0.2",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5",
    "vuetify": "^3.3.22"
  },
  "devDependencies": {
    "@mdi/font": "^7.3.67",
    "@types/node": "^20.8.10",
    "@vitejs/plugin-vue": "^4.2.3",
    "material-design-icons-iconfont": "^6.7.0",
    "ts-node": "^10.9.1",
    "vite": "^4.4.5"
  }
}

vuetify.ts（配置文件） #

import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  components,
  directives,
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
  // 其他配置...
});

plugins/index.ts #

import vuetify from "./vuetify";
import pinia from "@/stores";
import router from "@/router";

import type { App } from "vue";

export function registerPlugins(app: App) {
  app.use(vuetify).use(router).use(pinia);
}

main.ts #

import { createApp } from "vue";
import { registerPlugins } from "@/plugins";
import App from "./App.vue";

const app = createApp(App);
registerPlugins(app);
app.mount("#app");

图标使用代码 #

<v-app-bar>
  <v-btn color="primary" icon @click.stop="drawer = !drawer">
    <v-icon icon="mdi-home" />
  </v-btn>
  <p>Hello World!</p>
</v-app-bar>
<v-main>
  <router-view class="ma-5"></router-view>
</v-main>

修复方案 #

当前配置的核心问题是图标依赖与配置不匹配，提供两种修复方式：

方式一：使用MDI字体图标（推荐，匹配现有配置） #

在vuetify.ts顶部添加MDI字体样式的导入，让项目加载图标字体文件：

import "vuetify/styles";
import '@mdi/font/css/materialdesignicons.css'; // 新增这行
import { createVuetify } from "vuetify";
// 其他代码...

方式二：使用MDI SVG图标（基于@mdi/js依赖） #

如果想使用SVG矢量图标，需要修改图标集的导入来源，无需加载字体文件：

import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi-svg"; // 改为mdi-svg

export default createVuetify({
  components,
  directives,
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
  // 其他配置...
});

验证 #

修改后重启开发服务，导航栏中的mdi-home图标即可正常显示。

内容的提问来源于stack exchange，提问作者강찬욱