Material-design-icons: Self-Hosted Material Icon Not Showing On Both Chrome and IE

[jig9]

I referred to this link http://google.github.io/material-design-icons/#getting-icons

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

I replaced the url with the location of the material design icons folder but it won't show up.
Using the link to the Google Web Font, it works perfectly
I used the svg version and it works perfectly too.

[sachin8080]

I also did the same and I am facing the same issue.

[shyndman]

Did you also include the CSS class?

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;

  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

[matrix818181]

Got the same issue on my side. I did compare what I get from using the font locally to using Google Font, in Chrome, I got the same CSS from the inspector.

[JohanMa4]

Hi i fix this problem with the next steps:

1. I go to: https://fonts.googleapis.com/icon?family=Material+Icons
2. Copy the content of that page to my custom style sheet.
3. In the @font-face exist a property called url(http://.../.../)
4. Download the font that appear in that property, it should be like this: https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2
5. I rename the file downloaded and copy it in my font folder, and write the route in my style sheet in that @font-face property.

And this is done!
This is a quick way if you need display NOW your icons in your app.
That work to me.

Greeting, i hope that can help in this post.

[ants-house]

Discovered the same issue... drives me crazy!

Thx @JohanMa4! This is the only solution that works for now...

[shyndman]

Hi there,

I put together this little demo that mimics self-hosting. Would you mind using it to confirm the problem?

http://codepen.io/shyndman/pen/GpYJBd?editors=110

And I assume all of you are running Windows? I'm getting a VM going right now to take a look.

[shyndman]

Copied details from the dupe bug:

@Tusiji wrote:
I'm try to self host the iconfont(http://google.github.io/material-design-icons/) , but its not work. The chrome console shows that:

Failed to decode downloaded font: file:///Users/Pan/Documents/Dev/MDL/Hiar/font/MaterialIcons-Regular.woff2
index.html:1 OTS parsing error: invalid version tag
index.html:1 Failed to decode downloaded font: file:///Users/Pan/Documents/Dev/MDL/Hiar/font/MaterialIcons-Regular.woff
index.html:1 OTS parsing error: invalid version tag
index.html:1 Failed to decode downloaded font: file:///Users/Pan/Documents/Dev/MDL/Hiar/font/MaterialIcons-Regular.ttf
index.html:1 OTS parsing error: invalid version tag

[shyndman]

Hey,

In the 2.1 release I built the fonts slightly differently. Could you please try again?

[Tusiji]

Thx :)

2015-11-18 11:34 GMT+08:00 Scott Hyndman [email protected]:

Hey,

In the 2.1 release I built the fonts slightly differently. Could you
please try again?

—
Reply to this email directly or view it on GitHub
https://github.com/google/material-design-icons/issues/205#issuecomment-157594411
.

[shyndman]

Does it work?

[JohanMa4]

Hi @shyndman maybe the problem to run materialize icons self-hosted is that some of those files (woff2, woff, ttf) need some decode by another library, if you use my suggestion above maybe materialize icons works fine.

Please look at my suggestion and see how the materialize team load they fonts self-hosted.

I hope it has helped you.

Regards.

[shyndman]

Hey @JohanMa4,

No additional decoding required. These formats are native to browsers.

Are you sure it isn't a font loader they're using so they can get callbacks in JavaScript?

[JohanMa4]

I think that maybe they use some JavaScripts callbacks.
And if you see my suggestion you can look that they only load one font type .woff2.

I think too that the fonts version are outdated.

[shyndman]

Google Fonts serves browser-specific CSS. If you're using Chrome, they'll serve woff2. Safari? woff. Something older? ttf.

The self-hosting CSS was written with input from the Fonts team, so it should work great.

[JohanMa4]

@shyndman reading this post: http://stackoverflow.com/questions/30442319/failed-to-decode-downloaded-font maybe you can see the problem.

As it says there, the problem is for bad url format to call the fonts in the css.

I hope it has helped you.

[Wifsimster]

I'm having the same issues here in latest Chrome/Firefox stable.
Self-hosting doesn't worked, only solution is to download woff2 from https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 like @JohanMa4 said.

[MacgyverMartins]

Same problem here.
It's work if I use:

      @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
        src: local('Material Icons'),
             local('MaterialIcons-Regular'),
             url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
             url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff) format('woff'),
             url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.ttf) format('truetype');
      }

but if I use self-hosting I hade this messages in Chrome (MacOS)

roboto-black-webfont.eot:1 Failed to decode downloaded font: http://localhost:3333/fonts/material-design-icons/iconfont/MaterialIcons-Regular.woff2
roboto-black-webfont.eot:1 OTS parsing error: invalid version tag
roboto-black-webfont.eot:1 Failed to decode downloaded font: http://localhost:3333/fonts/material-design-icons/iconfont/MaterialIcons-Regular.woff
roboto-black-webfont.eot:1 OTS parsing error: invalid version tag
roboto-black-webfont.eot:1 Failed to decode downloaded font: http://localhost:3333/fonts/material-design-icons/iconfont/MaterialIcons-Regular.ttf
roboto-black-webfont.eot:1 OTS parsing error: invalid version tag

[shyndman]

Hey guys,

Without reproduction details, I can't diagnose the problems you're having. Can someone please provide a repo I can clone to see the issue?

[MacgyverMartins]

@shyndman I'm so sorry. I don't have time right now, but I created an self-host using just index.html and the material-design-icon through bower, and it's work!
Tonight I will try run in my private project again and give you the feedback. Maybe the problem is my architecture with browsersync.
Sorry for my bad english too.

[MacgyverMartins]

Here I am again.
Good news: the problem was my architecture.
When I use self-hosting with simple directory, that's works, but when I use in server like http://localhost I get the error _Failed to decode downloaded font..._
Of course this happen because I forget set /fonts as a public directory :sweat:

So a fix this just set in my server (Node.js):

app.use('/fonts', express.static('./app/fonts'));

I am so sorry for this big rookie mistake :sweat_smile:

[walkaboutlanguages]

I experienced this same issue. Downloading the fonts directly, (per MacgyverMartins' suggestion) from the rawgit URLs worked for me.

[robcalcroft]

I'm still having this issue http://stackoverflow.com/questions/34880289/material-design-icons-not-showing-in-browser

[robcalcroft]

Fixed, was caused by out of date icons from http://materializecss.com/ used the ones from this repo and fixed! :smile:

[GrantHolcombe]

I had the same issue, @JohanMa4 font file fixed my issues. Seems like the file provided by Material isn't encoded properly or something of that nature.

[rodolpheV]

Same issue here, and @JohanMa4 font file fixed my issues too.

[sumitjaisingh]

Same issue here still, if I remove "text-rendering: optimizeLegibility;" the icons start showing up. Not sure whether this is needed or not.

[mission-liao]

I met the same issue, and it works when I followed the way described by @JohanMa4

After binary comparing those downloaded files, I find what I downloaded from https://github.com/google/material-design-icons/tree/master/iconfont is actually a "HTML" file, not the font we expected.

Not sure if it helps others, but the right way to download fonts(or any binaries) from Github is like this:

[mbaquir]

Hi @JohanMa4,

I did what you said and it works on Chrome but not FireFox. Any idea what might cause it to not display in Firefox?

[rodolpheV]

Hi @mbaquir,
Try to follow this link on firefox, as it checks your navigator: https://fonts.googleapis.com/icon?family=Material+Icons
You should get another URL with another file type than with Chrome. Then follow the same step as for Chrome. I did it for Safari and it worked fine.

[mbaquir]

@rodolpheV Thanks that worked!

I was wondering if there is a file that would work for all the browsers. If not does that mean I would have to do these for all the different browsers (IE,Opera,Safari)

[freshmurry]

Here's what I did to get the navbar icons to appear in my Rails app.

1. Search github for the materialize css repo.
2. Go to apps/assets/stylesheets, right-click to create a new file, and name it "custom.css.scss" (or-whatever-you-like.css.scss.
3. Copy and past the css code from the materialize github repo into your new custom.css.scss file
4. Save your additions
5. Reload your browser

If that doesn't work, try adding gem 'materialize-sass' to your Gemfile, CTRL/Command - S to save, then run bundle install. Refresh the browser.

[simonvomeyser]

What worked out for me was pretty simple in the end:

Just clone the git-repo via

git clone http://github.com/google/material-design-icons/

and then use the files located in the iconfont/ folder. Copied them over to my project, everything is working now.

Honestly I have no idea why, I was manually downloading the raw files via my browser before
I hope this helps somebody.

[HNeukermans]

simonvomeyser's solution worked for me. Copy iconfont/ into into your project, then link to material-icons.css. FYI : Works in IE11 too.

[krishnaff]

@simonvomeyser Thanks!
So bottomline: Don't download font files from the browser.
Instead, git clone the repo and just copy the font files!

[vaughn-taylor]

The woff2 font is specific to the browser you used to originally grab the CSS from Google. So this link: https://fonts.googleapis.com/icon?family=Material+Icons in Chrome on a Mac desktop, will return a link to the "woff2" font: https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2

If you access the same link on an iPad, you'll get a "woff" font instead. So, it's clear that Google is dynamically delivering the CSS based on the browser and platform.

If you want to self-host the Material Icon font, you'll need all of the different font types which can be downloaded here: https://github.com/google/material-design-icons/tree/master/iconfont

After you've gotten those, you'll need to set up your CSS like this:

@font-face { font-family: 'Material Icons'; src: url('/your/font/path/MaterialIcons-Regular.eot'); src: url('/your/font/path/MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'), url('/your/font/path/MaterialIcons-Regular.woff2') format('woff2'), url('/your/font/path/MaterialIcons-Regular.woff') format('woff'), url('/your/font/path/MaterialIcons-Regular.ttf') format('truetype'), url('/your/font/path/MaterialIcons-Regular.svg#material_icons') format('svg'); font-weight: 400; font-style: normal; }

.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; }

[getsetbro]

The code that I needed to get the font to work in IE11 was this:

/* Support for IE. */
font-feature-settings: 'liga';

Found on this page: http://google.github.io/material-design-icons/#icon-font-for-the-web

[jonamoer]

My problem was the provided link http instead of https

[arnab0910]

Thx @JohanMa4! This solution is just Awesome

[abhinav1602]

Check if the address provided inside url(..) is with respect to the css file and not index.html file because this code is present in the css file.

[imntfl]

hello, file with format woff2 upload on localdisk no working?

[MamathaKavety29]

Hi i fix this problem with the next steps:

1. I go to: https://fonts.googleapis.com/icon?family=Material+Icons
2. Copy the content of that page to my custom style sheet.
3. In the @font-face exist a property called url(http://.../.../)
4. Download the font that appear in that property, it should be like this: https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2
5. I rename the file downloaded and copy it in my font folder, and write the route in my style sheet in that @font-face property.

And this is done!
This is a quick way if you need display NOW your icons in your app.
That work to me.

Greeting, i hope that can help in this post.

Thanks a lot...this is only solution that is working

[orionseye]

Does anyone test what he codes? develop, develop, develop... and then, simplest things do not work. Otherwise, this thread wouldn't be full of issues reported. right?..Funny guys

[srinivass92]

Failed to decode downloaded font: http://localhost:8080/ui/assets/iconfont/MaterialIcons-Regular.woff2
localhost/:1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
localhost/:1 Failed to decode downloaded font: http://localhost:8080/ui/assets/iconfont/MaterialIcons-Regular.woff
localhost/:1 OTS parsing error: OS/2: Failed to parse table
localhost/:1 Failed to decode downloaded font: http://localhost:8080/ui/assets/iconfont/MaterialIcons-Regular.ttf
localhost/:1 OTS parsing error: cmap: Failed to parse table

I am getting same error please help me.
i downloaded today from master branch.
https://github.com/google/material-design-icons

[srinivass92]

I referred to this link http://google.github.io/material-design-icons/#getting-icons

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

I replaced the url with the location of the material design icons folder but it won't show up.
Using the link to the Google Web Font, it works perfectly
I used the svg version and it works perfectly too.

Is it solved ???

[w4tson]

This doesn't seem like it's solved. I just wasted several hours trying to use the "upgrade" icon using the woff2 file downloaded via the links in the documentation. When the latest stable didn't work I used the latest master download. After much head scratching and thinking the problem was at my end I finally found this gem of a ticket, used the woff2 file from live hosted version at material.io and it just worked