Laravel 8+Vue 2+Vuetify环境下mdi-icons无法正常加载显示如何解决？

你的图标无法正常显示是由2个配置错误导致的：

1. Vuetify配置中iconfont参数取值与你实际使用的图标命名规范不匹配
2. icons配置项位置错误，被错误嵌套在theme配置内

修复步骤 #

步骤1：修改Vuetify.js配置 #

修正后的Vuetify.js代码如下：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify)

export default new Vuetify({
    // icons配置为顶级项，不要放在theme内部
    icons: {
        // 使用mdi前缀的图标需要指定iconfont为'mdi'，原来的'md'对应谷歌旧版Material Icons，命名不带mdi前缀
        iconfont: 'mdi',
    },
    theme: {
        dark: false,
        themes: {
            light: {
                primary: colors.purple,
                secondary: colors.grey.darken1,
                accent: colors.shades.black,
                error: colors.red.accent3,
            },
            dark: {
                primary: colors.blue.lighten3,
            },
        },
    },
})

步骤2：清理冗余引入避免冲突 #

你当前app.scss中同时引入了谷歌Material Icons和MDI图标资源，建议保留一种即可，不需要的可以删除：

• 如果你继续使用CDN方式引入MDI，保留@import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css');即可，可删除@import url('https://fonts.googleapis.com/css?family=Material+Icons');
• 如果你想用本地NPM包，取消注释// @import '~@mdi/font/css/materialdesignicons.min.css';，删除对应的CDN引入即可

步骤3：重新编译资源 #

运行Laravel前端编译命令重新打包资源，清理浏览器缓存后刷新页面即可看到图标正常显示：

npm run dev
# 开发环境下也可以用npm run watch实时监听改动

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