Vue项目使用Material Design Icons报字体404错误且图标显示为方块

• 字体loader输出路径配置错误：你当前配置的url-loader limit为100k，MDI字体文件大多超过这个大小，会自动交给file-loader处理，但你没有指定file-loader的输出路径，默认生成的/fonts/vendor/路径下不存在对应字体文件，所以触发404。
• CSS Modules配置错误：你开启了全局CSS Modules，会把MDI自带的css类名也进行哈希重命名，就算字体加载成功，类名不匹配也会导致图标显示异常。
• 引入路径/依赖包错误：如果同时安装了多个版本的MDI依赖包，或者引入css的路径写错，也会导致webpack解析字体资源失败，打包后缺失对应文件。

• 第一步：修改字体loader配置，明确指定输出路径，修改后的配置如下：

{
  test: /\.(woff|woff2|otf|eot|ttf|svg)(\?.*$|$)/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10240, // 仅将10k以下的小字体转base64，减少请求
        importLoaders: 1,
        fallback: {
          loader: 'file-loader',
          options: {
            outputPath: 'fonts/', // 打包后字体文件输出到dist/fonts目录
            publicPath: '/fonts/', // 网页访问字体的路径和输出路径对应
            name: '[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
}

• 第二步：调整CSS Modules配置，排除第三方库文件，避免修改MDI的原生类名：
  如果你的css-loader版本为v4及以上，直接用auto参数判断即可：

{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          auto: (resourcePath) => !resourcePath.includes('node_modules'), // 仅非node_modules下的业务css开启Modules
          localIdentName: '[local]_[hash:base64:8]'
        }
      }
    }
  ]
}

如果你的css-loader版本低于v4，拆成两条规则处理即可：

// 处理业务css，开启Modules
{
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[local]_[hash:base64:8]'
        }
      }
    }
  ]
},
// 处理第三方库css，不开启Modules
{
  test: /\.css$/,
  include: /node_modules/,
  use: ['vue-style-loader', 'css-loader']
}

• 第三步：确认MDI依赖和引入方式正确，推荐仅保留@mdi/font一个相关依赖，安装后在main.js中全局引入即可：

// 先执行安装命令：npm install @mdi/font -D
import '@mdi/font/css/materialdesignicons.css'

• 第四步：清除缓存重新运行项目，删掉node_modules下的.cache文件夹，再重新执行启动/打包命令即可解决问题。

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