Comment héberger des icônes matérielles hors ligne ?

Question

Je m'excuse si c'est une question très simple, mais comment utiliser les icônes matérielles de Google sans une

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

?

J'aimerais que mon application puisse afficher les icônes même lorsque l'utilisateur ne dispose pas d'une connexion Internet.

Answer 1

Méthode 2. Auto-hébergement 1

Télécharger et copiez le dossier iconfont, contenant les fichiers d'icônes de conception matérielle, dans votre projet local -- https://github.com/google/material-design-icons/tree/master/iconfont

• Remplacez la source dans l'attribut url de @font-face par le chemin du dossier de votre projet local (où se trouvent les fichiers de polices), par exemple. url( "iconfont/MaterialIcons-Regular.ttf")

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: '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;

  /* 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';
}

---

<i class="material-icons">face</i>

---

Paquets NPM / Bower

Google dispose officiellement d'une option de dépendance à Bower et NPM -- suivez le Guide des icônes matérielles 1

Utilisation de bower

bower install material-design-icons --save

Utiliser NPM

npm install material-design-icons --save

---

1 http://google.github.io/material-design-icons/

Answer 2

Je construis pour Angular 4/5 et je travaille souvent hors ligne, c'est pourquoi la méthode suivante a fonctionné pour moi. Installez d'abord le NPM :

npm install material-design-icons --save

Ajoutez ensuite ce qui suit au fichier styles.css :

@import '~material-design-icons/iconfont/material-icons.css';

Answer 3

Les approches supérieures ne fonctionnent pas pour moi. Je télécharge les fichiers depuis github, mais le navigateur ne charge pas les polices.

Ce que j'ai fait, c'est ouvrir le lien source de l'icône du matériau :

https://fonts.googleapis.com/icon?family=Material+Icônes

et j'ai vu ce balisage :

    /* fallback */
@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/v22/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;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

J'ouvre le lien url de la police woff https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

et téléchargez le fichier woff2.

Puis je remplace le chemin du fichier woff2 par le nouveau dans material-icons.css

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

Ce truc fonctionne pour moi.

Answer 4

Si vous utilisez le projet webpack, après

npm install material-design-icons --save

vous devez juste

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

Answer 5

Cela peut être une solution facile

---

Obtenez ceci dépôt qui est un fork de la dépôt d'origine Google a publié.

Installez-le avec bower ou npm

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

Importez le fichier css sur votre page HTML

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

ou

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Test : Ajouter une icône dans la balise body de votre fichier HTML

<i class="material-icons">face</i>

Si vous voyez l'icône du visage, c'est bon.

Si cela ne fonctionne pas, essayez d'ajouter ceci .. comme préfixe à node_modules chemin :

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">