配置Vuetify后mdi图标显示为方块无法正常使用该如何解决？

• 核对css-loader配置
  配置文件中的注释已经明确要求启用css-loader，如果你使用自定义webpack配置，请确认module.rules中存在css处理规则，包含css-loader且loader执行顺序正确。如果是Vue CLI默认生成的项目，已经预置了该配置，可跳过此项。
• 重装依赖解决安装或兼容问题
  依赖安装时如果出现网络波动，可能会导致字体文件丢失，也有可能你的Vuetify版本与最新版@mdi/font存在不兼容问题。可先删除项目下的node_modules文件夹、yarn.lock或package-lock.json文件，再重新执行安装命令：

  yarn add @mdi/font -D
  # 或
  npm install @mdi/font -D
  

• 检查字体文件加载状态
  打开浏览器开发者工具的Network面板，筛选Font类型的请求，查看是否有MDI相关的.woff2、.woff字体文件加载失败。如果存在加载报错，检查你的webpack/vue.config.js中的publicPath配置，以及静态资源处理规则（file-loader或asset模块配置），确保字体文件打包后的访问路径正确。
• 排查全局样式覆盖问题
  检查全局CSS中是否有* { font-family: 自定义字体 !important; }这类通配符强制修改字体的规则，MDI图标依赖专属的字体族渲染，被强制覆盖后就会显示为方块。你可以用元素审查工具查看渲染后的元素最终生效的font-family属性，确认是否被其他高优先级样式覆盖，调整全局样式规则即可。

补充说明：你当前带mdi-前缀的图标写法是符合字体图标用法要求的，不需要去掉前缀，无前缀的写法仅适用于@mdi/js的SVG图标引入方式，和你当前的配置不匹配。

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