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,
    },
  },
...

型
我设置了一个这样的pulgin文件：plugin/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>
  </v-app>

型
x1c 0d1x的数据
如果它是正常的，它应该看到蓝色部分的主页图标.但它不是.请让我知道是否有需要提供任何额外的代码或是否有需要固定的任何部分.