Material-design-icons: icons not working in chrome version 40

Created on 26 Mar 2016  路  13Comments  路  Source: google/material-design-icons

6 days ago, they are working fine, Below are the details:

google material icons site: (https://design.google.com/icons/)
googleicons1

And my chrome version:
about - google chrome

And my development environment is ubuntu 15 and webstrom.

bug

Most helpful comment

Check if you have a version of MaterialIcon-Regular.ttf (or woff, woff2) installed on your machine. If it's not the latest, it's going to create this problem... so either update it, or uninstall it!

Anyway, that is what caused the problem for me, since some pages like the Material Icon official page are going to look if you have the font installed locally before reaching for their hosted one (in this case url(https://fonts.gstatic.com/s/materialicons/v18...).

Hope this helps. Cheers

All 13 comments

351 Just posted, I missed this issue. I'm having the same problem, Chromium 37.0. Unfortunately as a result of this our application at all of our customer's locations is now displaying these broken icons. Any help at all would be appreciated.

Yes, my customers also asking me why they are broken.

it appears to be an issue with the v14 of the woff2 icon font file. As a workaround I reverted back to v13.
I removed the stylesheet link to https://fonts.googleapis.com/icon?family=Material+Icons and manually added the css myself, switching the woff2 file from v14 to v13 and everything works again.

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v13/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

We're taking a look.

Hi all,

Is there any reason you're running on version of Chrome that are so old? Stable is v49.

Hi @shyndman , We can't force our users to use only latest version right?

We need to support servers on server 2003, which I believe we can't do on later versions.

Same problem here with V14, V13 works fine. But this time it is on Android 4.0.3 and Chrome: 42.0.2311.111. Would be glad to update but there is a message at the top telling me that chrome updates are no longer supported for this version of android :-)

@shyndman this is still an issue on Chrome 53.0.2785.116 (64-bit)

Check if you have a version of MaterialIcon-Regular.ttf (or woff, woff2) installed on your machine. If it's not the latest, it's going to create this problem... so either update it, or uninstall it!

Anyway, that is what caused the problem for me, since some pages like the Material Icon official page are going to look if you have the font installed locally before reaching for their hosted one (in this case url(https://fonts.gstatic.com/s/materialicons/v18...).

Hope this helps. Cheers

To avoid that, I would suggest that any page using material icons stick to the official guideline: "The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

why you try remove Material+Icons font from your local( your laptop), then you will get result 馃憤

Like @phivh say I remove material to my font in my mac and all work perfect now thank you.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aleigood picture aleigood  路  4Comments

cdeutsch picture cdeutsch  路  4Comments

Paul-Ver picture Paul-Ver  路  3Comments

lorenzos picture lorenzos  路  3Comments

dy picture dy  路  3Comments