Materialize: icons not showing

Created on 2 Apr 2015 · 23Comments · Source: Dogfalo/materialize

is it just me, or are icons are not working for me after the 0.96 update.?

Source

frankleng

Most helpful comment

Dogfalo on 1 Sep 2015

👍5

All 23 comments

Just updated and mine seem fine.

dhawken on 2 Apr 2015

It's working here

sentenza80 on 2 Apr 2015

I had the same issue.
Solved it replacing at line ~781 of the file sass/components/_icons_material-design.scss the following:
instead of content: unicode($mdi-icon-value); write content: "\""+ $mdi-icon-value +"\""

jaimevent on 2 Apr 2015

@jaimevent thanks! that totally fixed it

frankleng on 3 Apr 2015

@Dogfalo why is the line @jaimevent referenced to not in
https://github.com/Dogfalo/materialize/blob/master/sass/components/_icons-material-design.scss

want to do a PR to fix this issue, but not sure where to start.

frankleng on 11 Apr 2015

We updated the icon font. Not sure what the issue here is with the icons not displaying. What sass version are you using?

Dogfalo on 12 Apr 2015

@Dogfalo thanks for the reply.
I'm using gulp-sass which pulls in node-sass 3.0.0-beta.4

I can build the latest materialize.scss and icons are showing. but they are all mismatched.

frankleng on 12 Apr 2015

You need to grab the updated font files as well
On Apr 11, 2015 7:29 PM, "Frank Leng" [email protected] wrote:

@Dogfalo https://github.com/Dogfalo thanks for the reply.
I'm using gulp-sass which pulls in node-sass 3.0.0-beta.4

I can build the latest materialize.scss and icons are showing. but they
are all mismatched.

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/1079#issuecomment-91944945
.

Dogfalo on 12 Apr 2015

ah of course! found a bug in my build script that didn't clean up the font.
Thanks!!!

frankleng on 12 Apr 2015

I had the same problem with the current repository code. @jaimevent solution worked for me.
Using broccoli-sass on ember-cli.

cascalheira on 16 Apr 2015

@jaimevent solved the bug.

Chun-Yang on 19 May 2015

I'm using the Meteor version of Materialize and I'm icons are not showing up, only the icon text. Am I missing something?

lsunsi on 18 Jul 2015

http://materializecss.com/icons.html

carlosperate on 18 Jul 2015

Entirely my bad.
Thanks

lsunsi on 18 Jul 2015

there's a problem with "Material-Design-Icons.woff" in the package, I've replaced it with the google version below, and it worked.
https://fonts.gstatic.com/s/materialicons/v7/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff

thg303 on 26 Aug 2015

@thg303 Thanks, it worked for me. @Dogfalo you need to update this in your V0.97 package.

nitesh-bhargav on 1 Sep 2015

Dogfalo on 1 Sep 2015

👍5

@Dogfalo unfortunately the problem in firefox is not solved by adding the icon link, we have to change the .woff file. Well the problem occurred after the .97 update.

nitesh-bhargav on 1 Sep 2015

SOLUTION
paste in your style.css

Solucion
crea tu style.css y pegalo c:

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(http://fonts.gstatic.com/s/materialicons/v7/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;
word-wrap: normal;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}