Electron build of Vue app doesn't display material icons

Our Vue app uses vuetify as its component library which by default uses material design icons. The only thing that needs to be done for the icons to work correctly is to import the css file which we do inside of the vuetify.js file:

import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import colors from "vuetify/lib/util/colors";
import "@mdi/font/css/materialdesignicons.css";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.orange.lighten1,
      },
    },
  },
});

We use Vue CLI Plugin Electron Builder to build our app for desktop. The icons appear fine in dev mode when running vue-cli-service electron:serve, but if we build the app for production using vue-cli-service electron:build and run it on Windows or MacOS every icon is displayed as a rectangle.

This is what our package.json looks like:

{
  "name": "...",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service electron:serve",
    "build": "vue-cli-service electron:build",
    "lint": "vue-cli-service lint",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "rebuild": "electron-rebuild -f -w serialport"
  },
  "dependencies": {
    "serialport": "^10.5.0",
    "vue": "^2.7.14",
    "vue-router": "^3.2.0",
    "vuetify": "^2.6.14",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@mdi/font": "^7.1.96",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-prettier": "^7.0.0",
    "electron": "^22.0.2",
    "electron-devtools-installer": "^3.2.0",
    "eslint": "^8.32.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "plotly.js-dist": "2.18.2",
    "prettier": "^2.8.3",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
    "vue-cli-plugin-vuetify": "^2.5.8",
    "vuetify-loader": "^1.9.2"
  },
  "overrides": {
    "vue-cli-plugin-electron-builder": {
      "electron-builder": "^23.1.0"
    }
  },
  "engines": {
    "node": ">=18"
  }
}

This is what our vue.config.js looks like:

const path = require("path");

module.exports = {
  lintOnSave: false,
  transpileDependencies: ["vuetify"],
  pluginOptions: {
    electronBuilder: {
      preload: "src/preload.js",
      externals: ["serialport"],
      outputDir: "builds",
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src/"),
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "~@/assets/style/_variables.scss"',
      },
    },
  },
};

Any ideas what could be causing this? Or how we can further debug the problem?

The "vuetify icon not showing" post suggests installing @mdi/font, which you have done.

However, this is declared in devDependencies, which can be ignored when built for production, as explained here.

So I would first test if declaring that same @mdi/font packages in dependencies instead changes the "build for production" end result.

I had a similar problem once using Angular + Electron. What you can do is build your app with the devTools enabled, so you can see the console errors. In my case, Jquery was being imported after bootstrap, breaking my non-dev environments.