[SOLVED] Materialize:materialize Icon's not working

help
1

Using the materialize package and adding icons with <i class="material-icons">3d_rotation</i> doesn’t seem to be working… If I use <i class="mdi-action-3d-rotation"></i> though it works fine. Anyone else have this issue, or maybe some insight into how to fix it?

1 Like
2

materialize doesn’t make use of ligatures, as that’s a new feature that just launched during the 2015 I/O. Instead they assign the char reference to a class. Probably for the best to stick with how they got it, unless you only need to support IE10+.

For more info see ligatures in:
https://google.github.io/material-design-icons/

3

Oddly this is the documented way to add icons in materializecss.

4

I guess If I just read more carefully, it states that you need to add <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> to be able to use the icons in this manor… They should probably still document the classes though since ligatures aren’t directly supported by materialize.

5

whoa, just checked out their page & yeah, you’re right (although the whole icons page has a bug in the formatting which doesn’t do much for confidence). They’ll probably get it straightened out in a version or 2, while I was still using materialize i remember they made a ton of breaking changing each version & it got bad enough to make me give up on it.

6

yo lo solucione de esta manera:
1 paso :
en la documentacion hace mencion que se agrege
href=“https://fonts.googleapis.com/icon?family=Material+Icons” rel=“stylesheet”>

ir al link https://fonts.googleapis.com/icon?family=Material+Icons

2 paso : muestra el link
@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/v10/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format(‘woff2’);
}

ir al link https://fonts.gstatic.com/s/materialicons/v10/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

3 paso: una vez descargado el archivo
2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2
cambiar nombre por Material-Design-Icons.woff2

4 paso: remplazar el archivo de la carpeta font/material-design-icons/Material-Design-Icons.woff2
por el archivo del tercer paso.

5 paso: agregar en la hoja de estilo (materailize.css)

@font-face {
font-family: ‘Material Icons’;
src:url("…/font/material-design-icons/Material-Design-Icons.woff2") format(‘woff2’);
}

.material-icons {
font-family: ‘Material Icons’;
font-weight: normal;
font-style: normal;
-webkit-font-feature-settings: ‘liga’;
}

7

i have an odd issue that seems to be related …well two, but the 1st is manageable.

if you have a look at my page half the icons are working, and half aren’t. more interestingly half show a blank square when loading and half don’t, so they appear to be loading in a different way despite the code being the same. …even more interesting, the same code on another of my pages works fine.

the second issue is that i need to call the wrong icons. on the list i need call to the icon one to the right of the one i want… it works just fine, if a little weird. is that the bug @mattkrick mentioned?