[BUG] Long load time in Chrome, hang in Firefox due to long icon loading

[jjhiew]

Module version 1.12.3

Describe the bug The default mdi CDN is loading very slowly, which causes the browser to be completely unresponsive until the icons are done loading. On Chrome, the delay is a few seconds. Of Firefox, it hangs for about a minute.

To Reproduce

1. Spin up a new nuxt app using create-nuxt-app
2. choose the Vuetify UI package
3. every other option doesn't matter, can leave those as default
4. open the app once it's loaded, in Chrome you should see that it takes a few seconds for the loading animation to stop. On firefox, you'll see the browser hang if you try to do anything (click around, resize window, etc.)

Expected behavior It should load quickly

Screenshots N/A

Additional context Work around is to not use the mdi icon package, and instead choose another via setting:

Switching to the another icon package solves the issue.

    defaultAssets: {
      icons: 'md'
    },

Doing this will prevent the browsers from hanging. However, perhaps a better approach would be to not lock things up while trying to load the fonts/icons from CDN.

[Rleit]

Can confirm same issue.

[Star-Best]

I can also confirm the same issue since today.

[Rleit]

#https://github.com/Templarian/MaterialDesign-Webfont/issues/84

[Star-Best]

Temp Fix for Nuxt + Vuetify:

Install the older version of @mdi/font

npm install @mdi/[email protected]

Reference this version + Block automatic fetching of latest mdi/fonts via vuetify.

nuxt.config.js:

 css: [
    '@mdi/font/css/materialdesignicons.css'
  ],

....

vuetify: {    
    defaultAssets: false,
    icons: {
       iconfont: 'mdi',
    },....
}

[irongomme]

It would be better in the future to avoid referencing cdn url of type "latest", which can bring (as we've been confonted with) instability and unpredictability. In addition, that would be nice to have the ability to override those urls into the nuxt.config

[softy2k]

Same issue since yesterday...

[qualiatokyoltd]

I have same issue. it appears only latest chrome on windows10 with disabled cache.

when cache enabled, this issue will not appear.

Chrome for Mac, Android,iOS isn't have this issue.

I tried to bandle mdi icons locally, it fixed.

[softy2k]

My workaround: I changed in file /public/index.html

from <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> to <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">