如何调试解决Vuetify已引入MDI仍不显示追加图标的问题

输入框右侧按钮图标无法显示的核心原因是图标类名匹配失败：

• 你虽然引入了MDI图标样式资源，但MDI图标库的所有图标类名均以mdi-作为前缀。
• CDN模式引入Vuetify 2.x时，若初始化Vuetify实例时没有显式指定使用的图标集为mdi，框架不会自动为组件传入的图标名、组件内置功能的图标名拼接mdi-前缀，最终DOM节点上的class不符合MDI样式规则，浏览器找不到对应的图标渲染规则，图标就无法正常显示。

优先方案：全局配置Vuetify图标集（推荐，可解决所有图标问题） #

初始化Vuetify实例时，显式声明当前使用的图标集为MDI，框架会自动为所有组件的图标（包括你手动传入的append图标、组件自带的清除/下拉箭头等内置图标）拼接正确的mdi-前缀。
修改Vue实例初始化代码如下：

new Vue({
  el: "#app",
  vuetify: new Vuetify({
    icons: {
      iconfont: 'mdi' // 明确指定使用MDI图标集
    }
  }),
  components: {
    mainbox
  }
});

配置完成后，原有代码里append-icon="add"的写法不需要改动，所有图标都能正常渲染。

临时方案：手动写全图标类名（仅解决手动传入的图标问题） #

如果不想修改全局配置，可以直接给手动传入的图标名加mdi-前缀，将对应代码修改为：

<v-text-field label="Text ..." hint="write anything ... " v-model="item" append-icon="mdi-add" @click:append="add(item)"></v-text-field>

注意：该方案只能修复你手动传入的append图标，v-combobox的clearable清除图标、下拉箭头等组件内置图标仍然会因为类名错误无法显示，不推荐长期使用。

内容的提问来源于stack exchange，提问作者code-8