[Bug Report] materialdesignicons stopped working properly

seongjin605 commented 4 years ago

Environment

Vue Version: 2.6.11 Nuxt Version: 2.10.1 @nuxtjs/vuetify Version: 1.9.0 Vuetify Version: 2.2.8 Browsers: Chrome 80.0.3987.132 OS: Mac OS 10.15.3

Expected Behavior

https://v1.vuetifyjs.com/en/components/paginations

Actual Behavior Bug image

I did not modify the icon, but one day it suddenly changed to like this Is this material icon's CDN problem?

seongjin605 commented 4 years ago

The same problem occurs with the v-rating component.

Expected Behavior

https://vuetifyjs.com/en/components/ratings/

Actual Behavior Bug image

Also most of the icons are causing problems. 😢

ngongon commented 4 years ago

This is happening from about 2 hours ago.

MpEliaz commented 4 years ago

same here!

MajesticPotatoe commented 4 years ago

Are you using CDN without explicitly specifying a version?

seongjin605 commented 4 years ago

@MajesticPotatoe yes, i am using @nuxtjs/vuetify Version: 1.9.0 Here are the material icon CDN links.(yourPath/node_modules/@nuxtjs/vuetify/dist/icons.js)

const presetsCDN = {
    'mdi': 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css',
    'md': 'https://fonts.googleapis.com/css?family=Material+Icons',
    'fa': 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css',
    'fa4': 'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css'
};
export default function setupIcons(preset) {
    this.options.head.link.push({
        rel: 'stylesheet',
        type: 'text/css',
        href: presetsCDN[preset]
    });
}
//# sourceMappingURL=icons.js.map

I don't know if this CDN link is the problem, but I'm not sure what's causing it so I'm looking for a bug.

ngongon commented 4 years ago

For more information, some default icons are having problems. For example, arrow_down icon of autocomplete, list icon of left-toggle-drawer, arrow_down icon of list group. The pagination icons seem to be the same case, which the name icons are not designated manually by developer.

MajesticPotatoe commented 4 years ago

@seongjin605 @mdi/font@latest you are not explicitly specifying a cdn version, this ultimately can cause cache issues when mdi updates their libraries.

ngongon commented 4 years ago

@seongjin605 Thanks, I urgently edited node_modules and redeployed.

ElijahKotyluk commented 4 years ago

For Vuetify + Nuxt using create-nuxt-app, I ended up uninstalling @nuxtjs/vuetify, and installing vuetify and @mdi/font@4.9.95 and created a Vuetify plugin. All works perfectly again.

// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'

import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)

export default (ctx) => {
  const vuetify = new Vuetify({
    theme: {
      dark: false
    }
  })
  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

// nuxt.config.js
  ...
  plugins: ['~/plugins/commerce.js', '~plugins/vuetify.js'],
  ...

If this comment should not be here, just let me know and I'll remove it.

PabloRN commented 4 years ago

@seongjin605 @mdi/font@latest you are not explicitly specifying a cdn version, this ultimately can cause cache issues when mdi updates their libraries.

Sorry not working with latest

KaelWD commented 4 years ago

Sorry not working with latest

Yeah that's what he said.

This is a problem with jsdelivr, here's what I think is happening:

Loads https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.css
Browser has v4.5.95 cached
Loads ../fonts/materialdesignicons-webfont.eot?v=4.5.95
Cache miss, so it pulls in https://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/materialdesignicons-webfont.eot?v=4.5.95
You now have the v4.5.95 stylesheet with v5.0.45 fonts, because the ?v= is just for cache busting

http://unpkg.com/ doesn't have this problem because it redirects to the actual version, preventing a cache mismatch. If you use jsdelivr you must specify a full version number.

kevinasurjadi commented 4 years ago

In my kind of environment

nuxt: 2.11.0
@nuxtjs/vuetify: 1.9.0

I was experiencing the same issue, but I solved it by installing extra devDependency of

@mdi/font: 5.0.45

and add it to my vuetify config (vuetify.options.js) like this (refering to https://vuetifyjs.com/en/customization/icons/#installing-iconfonts)

import '@mdi/font/css/materialdesignicons.css'

export default {
  icons: {
    iconfont: 'mdi'
  }
}

and I add it to nuxt.config.js like this

...
  buildModules: [
    '@nuxtjs/vuetify'
  ],
  vuetify: {
    optionsPath: './vuetify.options.js'
  }
...

I believe there is something wrong with the default url https://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/... using always font@latest which if something bad happens there on the update, it causes bad things to us, too.

hope this helps.

Ed-ouard commented 4 years ago

It seems that the issue has been fixed now, with the latest version of mdi fonts. No need to change the package.

PabloRN commented 4 years ago

It seems that the issue has been fixed now, with the latest version of mdi fonts. No need to change the package.

not really...

PabloRN commented 4 years ago

4.5.95

Hey @KaelWD in my case I can see: https://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/materialdesignicons-webfont.woff2?v=5.0.45 and still showing wrong icons

liranh85 commented 4 years ago

Fixed for me, all icons are rendered correctly again. Thanks for the quick fix!

hiiwave commented 4 years ago

I encountered the same problem using vuetify installed via vue-cli. Here is how I managed to solve it:

Search materialdesignicons.min.css in the project folder. It appears at public/index.html.
Modify it to …materialdesignicons.css.
Working now.

It appears that the minified version has the old content in v4.9x. Thus I switched to regular version temporarily to fix that. Hope that helps.

KaelWD commented 4 years ago

It appears that the minified version has the old content in v4.9x

Because your browser has it cached. If you clear the cache or specify a version range it'll work again.

https://github.com/vuetifyjs/vuetify/issues/10797#issuecomment-596942773

I'm locking this thread so the solution doesn't get buried.

Either

Specify a version to use (https://cdn.jsdelivr.net/npm/@mdi/font@5.0.45/css/materialdesignicons.min.css)
Switch to unpkg (https://unpkg.com/@mdi/font@latest/css/materialdesignicons.min.css)
Or remove the CDN and install @mdi/font from npm instead

hiiwave commented 4 years ago

specify a version range it'll work again.

How can I do this? I tried adding ?v=5 at the end of the url but it did not work.

johnleider commented 4 years ago

If you have any additional questions, please reach out to us in our Discord community.

vuetifyjs / vuetify