Materialdesign: Certain icons won't display despite being in the CSS file

Created on 18 Oct 2018  路  6Comments  路  Source: Templarian/MaterialDesign

We are looking to use Material Design Icons as part of a Vue project.

Out of 373 icons we have integrated to our app, there are just 5 which will not display:

  1. mdi-hand-pointing-up
  2. mdi-timeline
  3. mdi-file-alert
  4. mdi-human-female-girl
  5. mdi-hand

We are referencing the following CSS:
https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.css

I see that timeline has been created since the latest release (2th Sept v2.8.94) so it makes sense why that one is not working, but the other 4 are all in the CSS file but we cannot get them to display.

Could this be down to renaming or something else?

Any help on this would be great as we are keen to use MDI icons within our application.

Question

All 6 comments

http://cdn.materialdesignicons.com/2.8.94/ I can see them rendering in the preview, so it should work.

Yea, the timeline will be in the release going out this weekend. The rest should be fine.

My first guess is something is setting ::before on the element in CSS overriding the icon's content or font-family. Other that not sure. In Chrome double check nothing is overriding the CSS props coming from our library.

Thanks for the rapid reply @Templarian - great to hear the next release is due so soon.

I've checked everything I can think of and can't see anything odd - but I'm not an icon font expert myself.

All I'm doing is referencing the icon names from some JSON - and all icons apart from 6 are working. If you look at this CodePen I created you can see the problem. I've moved the broken ones to the top so you don't have to go searching for them.
https://codepen.io/cssgod/pen/gBeyva

If it helps, we are using Vuetify on top of Vue. Vuetify offers support for your icon set and they look great - just need to get these last few working.

You're using v2.5.94 in that Pen, the current version is v2.8.94. To fix this, you'll need to update the CDN URL in your code to use the correct version.

@uiguru You're referencing 2.5.94. 馃榿

If you up the version to the latest it works,.

(you win this one @PeterShaggyNoble 馃ぃ)

Oh no! The shame of it :-( Been so busy trying to map the names of our existing custom icomoon icons to suitable ones in your font that I tried changing the .94 but totally missed the 5 should be an 8.

Glad this is not on a work board or I'd never live this down. Thanks for the rapid help and keep up the great work guys.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

EdricChan03 picture EdricChan03  路  3Comments

alvaroc1 picture alvaroc1  路  3Comments

Kanga-Who picture Kanga-Who  路  3Comments

Templarian picture Templarian  路  3Comments

vishnu1991 picture vishnu1991  路  3Comments