Vuetify 1.5.24按钮内图标不显示问题求助

针对你使用Vuetify 1.5.24创建图标按钮却只显示空白的情况，按以下步骤排查解决：

1. 确认MDI字体正确引入 #

Vuetify 1.5依赖Material Design Icons(MDI)字体文件，仅安装mdi包还不够，需在项目中明确引入字体样式：

• 若使用npm包管理，在项目入口文件（如main.js）添加：

import 'material-design-icons-iconfont/dist/material-design-icons.css'

• 若通过CDN引入，在index.html中添加：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet">

2. 验证图标名称兼容性 #

Vuetify 1.5适配的是旧版MDI，部分图标名称和新版MDI不一致。你使用的filter-variant可能不在对应版本的MDI支持列表中，尝试替换为旧版兼容的图标名，比如filter：

<v-btn icon color="dark"><v-icon>filter</v-icon></v-btn>

3. 检查Vuetify初始化配置 #

确保初始化Vuetify时没有禁用MDI图标支持，默认配置是启用的，若有自定义配置需确认：

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  // 避免将iconfont设置为非mdi的选项，比如'md'会切换为谷歌原生图标
})

4. 清除缓存并重启服务 #

IntelliJ本地开发环境可能存在缓存问题，执行以下操作：

• 按Ctrl+Shift+R强制刷新浏览器清除缓存
• 停止本地开发服务后重新启动
• 若使用webpack等构建工具，清除构建缓存后重新编译

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