vite+vue3+vuetify - 图标不显示

Question

我使用的是vite+vue3+vuetify alpha al最新版本 无论我做什么，图标都不会显示在 v-text-field 上 有人能给我举一个很好的例子吗？ 注意 v-icon 显示图标

BR

Answer 1

很难知道你想做什么，但如果我理解正确的话： 这是文档中的示例：

 <v-text-field
        label="Prepend"
        prepend-icon="mdi-map-marker"
      ></v-text-field>

这是我相信您正在搜索的内容的直接链接： https://next.vuetifyjs.com/en/components/text-fields/

Answer 2

您需要包含指定的图标库（即使使用 Material Design Icons 中的默认图标） ）。这可以通过包含 CDN 链接或将图标库导入到您的应用程序中来完成。

npm 安装@mdi/font-D

然后添加到src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css' // 确保您正在使用 css-loader 从 'vuetify' 导入 { createVuetify }

导出默认createVuetify({ 图标：{ defaultSet: 'mdi', // 这已经是默认值 - 仅用于显示目的 }, })