New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Self-Hosted Material Icon Not Showing On Both Chrome and IE #205
Comments
I also did the same and I am facing the same issue. |
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';
} |
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. |
Hi i fix this problem with the next steps:
And this is done! Greeting, i hope that can help in this post. |
Discovered the same issue... drives me crazy! Thx @JohanMa4! This is the only solution that works for now... |
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. |
Copied details from the dupe bug: @Tusiji wrote:
|
Hey, In the 2.1 release I built the fonts slightly differently. Could you please try again? |
Thx :) 2015-11-18 11:34 GMT+08:00 Scott Hyndman notifications@github.com:
|
Does it work? |
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. |
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? |
I think that maybe they use some JavaScripts callbacks. I think too that the fonts version are outdated. |
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. |
@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. |
I'm having the same issues here in latest Chrome/Firefox stable. |
Same problem here. @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)
|
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? |
@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! |
Here I am again. 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 😅 |
I experienced this same issue. Downloading the fonts directly, (per MacgyverMartins' suggestion) from the rawgit URLs worked for me. |
I'm still having this issue http://stackoverflow.com/questions/34880289/material-design-icons-not-showing-in-browser |
Fixed, was caused by out of date icons from http://materializecss.com/ used the ones from this repo and fixed! 😄 |
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. |
Same issue here, and @JohanMa4 font file fixed my issues too. |
Same issue here still, if I remove "text-rendering: optimizeLegibility;" the icons start showing up. Not sure whether this is needed or not. |
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: |
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? |
Hi @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) |
Here's what I did to get the navbar icons to appear in my Rails app.
If that doesn't work, try adding |
What worked out for me was pretty simple in the end: Just clone the git-repo via
and then use the files located in the Honestly I have no idea why, I was manually downloading the raw files via my browser before |
simonvomeyser's solution worked for me. Copy iconfont/ into into your project, then link to material-icons.css. FYI : Works in IE11 too. |
@simonvomeyser Thanks! |
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:
|
The code that I needed to get the font to work in IE11 was this:
Found on this page: http://google.github.io/material-design-icons/#icon-font-for-the-web |
My problem was the provided link http instead of https |
Thx @JohanMa4! This solution is just Awesome |
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. |
hello, file with format woff2 upload on localdisk no working? |
Thanks a lot...this is only solution that is working |
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 |
Failed to decode downloaded font: http://localhost:8080/ui/assets/iconfont/MaterialIcons-Regular.woff2 I am getting same error please help me. |
Is it solved ??? |
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 |
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.
The text was updated successfully, but these errors were encountered: