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?
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/
Oddly this is the documented way to add icons in materializecss.
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.
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.
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’;
}
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?