Use vuetify `mdi` icons locally in nuxt.js and block `cdn.jsdelivr.net` cdn

user_8344575 0
Viewed 817

I am using vuetify framework in the nuxt.js ecosystem and there's a problem! https://cdn.jsdelivr.net is blocked by my country Iran and every time user wants to load the Vue application it stuck loading this URI. so I want to use mdi icons locally in my app and somehow store them in the static directory or elsewhere.

Please let me know how can I avoid mdi CDN and use it just like another global CSS via nuxt.config.js

Nuxt Config

css: [
    '@/assets/main.css',
    '@mdi/font/css/materialdesignicons.css'
  ],
vuetify: {
    rtl: true,
    lang: {
      locales: {
        fa
      },
      current: 'fa'
    },
    options: {
      customProperties: true,
    },
    theme: {
      light: true,
      themes: {
        light: {
          primary: '#15977D',
          secondary: '#205072',
          accent: '#82B1FF',
          error: '#FF5252',
          danger: '#f62d51',
          success: '#36bea6',
          warning: '#FFC107'
        },
      },
    },
    customVariables: ['~/assets/variables.scss'],
    icons: {
      iconfont: 'mdi',
    },
  },

Browser Network Panel

showing that it cant load jsdeliver and loading take a long time

nuxt.js vuetify.js javascript
2 Answers

You should access the CDN's CSS file, copy it's content to a local .css file in your project and import it with something like css: ['~/assets/css/materialicons.css'].

user_88165850

we should disable defaultAssets from vuetify options

vuetify: {
    defaultAssets: false,
}
user_83445750
Related