Mise à jour 2019 ici:
Pour auto-héberger vos icônes matérielles, les Regular, Rounded, Sharp, toutes les variantes. Allez les chercher dans ce repo:
https://github.com/petergng/material-icon-font
Pour une raison quelconque, je ne sais pas pourquoi ces polices ne sont pas facilement accessibles à partir des référentiels Google.
Mais voilà.
Après avoir téléchargé le package, allez dans le dossier bin et vous verrez les quatre variantes. Bien sûr, c'est à vous d'utiliser celui-ci.
Pour les utiliser, créez un fichier css et
- Générez une police pour chaque variante dont vous avez besoin:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
src: local('Material-Icons-Regular'),
url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
src: local('Material-Icons-Round'),
url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
url(./icons/round/Material-Icons-Round.woff) format('woff'),
url(./icons/round/Material-Icons-Round.svg) format('svg'),
url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
src: local('Material-Icons-Sharp'),
url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}
Le urllien vers l'emplacement des icônes dans votre projet.
- Maintenant, enregistrons les classes d'icônes:
.material-icons-outlined, .material-icons {
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Cela fera à la fois
.material-icons-outlined,
et
les .material-iconsclasses utilisent les mêmes valeurs par défaut. Si vous souhaitez l'utiliser .material-icons-sharp, ajoutez-le simplement aux deux noms de classe.
- Enfin, intégrons la police de caractères que vous avez extraite de l'étape 1.
.material-icons {
font-family: 'Material Icons';
}
.material-icons-outlined {
font-family: 'Material Icons Outline';
}
Encore une fois, pour utiliser plus de variante, comme Sharp, ajoutez simplement son bloc comme les deux ci-dessus.
Une fois fait ... allez dans votre html et utilisez vos icônes nouvellement créées.
<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>
