Nuxt 3 can't load Material Design Icons with Vuetify in production build

Question

I'm using Nuxt 3 with Vuetify 3 and deploying with Amplify. In my web application, in local build the v-icon can display the icon correctly. But in the deployed app, the icons sometimes doesn't display properly.

Correct icon

Incorrect icon

I checked the network tab when the error happened but the font is already loaded

Network tab 1

Network tab 2

Can anyone help me with this issue?

This is how i use the v-icon of Vuetify:

<v-icon icon="mdi-calendar-month-outline" />

I've installed @mdi/font and vuetify

"dependencies": {
    "@mdi/font": "^7.2.96",
    "vuetify": "^3.2.1"
}

My nuxt config:

export default defineNuxtConfig({
  ssr: false,
  css: [
    'vuetify/styles',
    '~/assets/css/main.css',
    '@mdi/font/css/materialdesignicons.min.css',
  ],
})

My Vuetify plugin:

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi,
      },
    },
    components: {
      ...labs,
      ...components,
    },
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

My Amplify build setting:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate 
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: '.output/public'
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Answer 1

For anyone who still struggle with this. Thanks to @Moritz Ringler's comment. I've been able to solve it using SVG icons