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

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

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

?

Je souhaite que mon application puisse afficher les icônes même lorsque l'utilisateur n'a pas de connexion Internet

Méthode 2. Guide du développeur auto-hébergement

Téléchargez la dernière version de github (assets: fichier zip), décompressez 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/ communiqués

Il vous suffit d'utiliser le dossier iconfont de l'archive: il contient les polices d'icônes dans les différents formats (pour la prise en charge de plusieurs navigateurs) et le css standard.

• Remplacez la source dans l'attribut url de @ font-face, par le chemin relatif du dossier iconfont dans 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>

Packages NPM / Bower

Google a officiellement une option de dépendance Bower et NPM - suivez le guide des icônes matérielles 1

Utilisation du bower :bower install material-design-icons --save

Utilisation de NPM :npm install material-design-icons --save

Icônes de matériau : Vous pouvez également consulter la police d'icônes de conception matérielle et le cadre CSS pour l'hébergement automatique des icônes, sur https://marella.me/material-icons/ de @ marella

Remarque

Il semble que Google a le projet en mode de maintenance réduite. La dernière version était, au moment de la rédaction, il y a 3 ans!

Il y a plusieurs problèmes sur GitHub à ce sujet, mais j'aimerais faire référence au commentaire de @cyberalien sur le problème Is this project actively maintained? #951où il fait référence à plusieurs projets communautaires qui ont bifurqué et continuent de maintenir des icônes matérielles.

Je construis pour Angular 4/5 et je travaille souvent hors ligne, donc ce qui suit a fonctionné pour moi. Installez d'abord le NPM:

npm install material-design-icons --save

Ajoutez ensuite ce qui suit à styles.css:

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

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

Ce que j'ai fait a été d'ouvrir le lien source de l'icône matérielle:

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

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.

Ensuite, 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');
}

Cela fait que les choses fonctionnent pour moi.

Si vous utilisez un projet webpack, après

npm install material-design-icons --save

tu as juste besoin de

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

Cela peut être une solution simple

Obtenez ce référentiel qui est un fork du référentiel original publié par Google.

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: ajoutez une icône à l'intérieur de la balise body de votre fichier HTML

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

Si vous voyez l'icône de visage, vous allez bien.

Si cela ne fonctionne pas, essayez d'ajouter ceci ..comme préfixe au node_moduleschemin:

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

Ma recette comporte trois étapes:

1. pour installer le package material-design-icons

   npm install material-design-icons

2. pour importer le fichier material-icons.css dans un fichier / projet .less ou .scss

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

3. pour inclure le code recommandé dans le fichier / projet reactjs .js

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>

Utilisez material-design-icons-iconfont

Divulgation complète, je suis l'auteur de ce package

Le projet d' icônes de conception de matériaux de Google nécessite peu d'entretien et est obsolète pendant un certain temps . Il y a un écart entre la version dans https://material.io/icons/ et la version dans material-design-icons .

J'ai créé material-design-icons-iconfont pour résoudre ces problèmes majeurs:

• jams de material-design-iconsnpm install - tous les fichiers svg / xml / ... non pertinents ont été supprimés
• Les fichiers de polices sont toujours à jour directement à partir du Google FontsCDN
• Prise en charge de scss

Installer via npm

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

Cela dépend de la manière dont vous compressez votre application Web ( webpack/ gulp/ bower/ ...), vous devrez importer le fichier .css/ .scss(et vous pourriez changer le chemin des polices relatives)

Importer à l'aide de SCSS

Importez dans l'un de vos fichiers sass

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

Plus tard, référencez votre icône souhaitée <i class="material-icons">+ icon-id +</i>

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

• lisez les instructions complètes sur material-design-icons-iconfont pour plus de méthodes d'importation

Page de démonstration

Il est livré avec une page de démonstration légère pour faciliter la recherche et le copier-coller des polices

J'ai essayé de compiler tout ce qui doit être fait pour les icônes auto-hébergées dans ma réponse. Vous devez suivre ces 4 étapes simples.

1. Ouvrez le dossier iconfont du référentiel materialize

   lien- https://github.com/google/material-design-icons/tree/master/iconfont

2. Téléchargez ces trois fichiers d'icônes ->

   MaterialIcons-Regular.woff2 - format ('woff2')

   MaterialIcons-Regular.woff - format ('woff')

   MaterialIcons-Regular.ttf - format ('vrai type');

   Remarque - Après le téléchargement, vous pouvez le renommer comme vous le souhaitez.

3. Maintenant, allez dans votre CSS et ajoutez ce code

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(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';
}

Remarque: L'adresse fournie dans src: url (...) doit correspondre au 'Fichier CSS' et non au fichier index.html. Par exemple, il peut s'agir de src: url (../ myicons / MaterialIcons-Regular.woff2)

4. Vous êtes prêt à utiliser maintenant et voici comment cela peut être fait en HTML

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

Cliquez ici pour voir toutes les icônes qui peuvent être utilisées.

Après avoir fait npm install material-design-icons, ajoutez ceci dans votre fichier CSS principal:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/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';
}

Avec cli angulaire

npm install angular-material-icons --save

ou

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

material-design-icons-iconfont est la dernière version mise à jour des icônes. angular-material-icons n'est pas mis à jour depuis longtemps

Attendez, attendez que l'installation soit terminée, puis ajoutez-la à angular.json -> projets -> architect -> styles

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

ou si vous avez installé material-desing-icons-iconfont alors

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

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

1. 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.

2. 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.

3. 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>

Sur http://materialize.com/icons.html les informations d'en-tête de style que vous incluez dans la page, vous pouvez accéder au lien hypertexte réel et faire des copies localisées pour utiliser les icônes hors ligne.

Voici comment faire: NB: Vous allez télécharger deux fichiers dans all icon.css et somefile.woff .

1. Accédez à l'URL suivante comme requis dans l'en-tête

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

Enregistrez la page sous n'importe quel nom de fichier.css. La valeur par défaut est icon.css

2. Cherchez une ligne comme celle-ci

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. Visitez l'URL qui a .woff se terminant

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. Votre navigateur le téléchargera automatiquement. Enregistrez-le dans votre dossier CSS.

4. Vous devriez maintenant avoir les deux fichiers icon.css et 2fcrYFNa .... mY.wof22 , enregistrez-les tous les deux dans votre css. Maintenant, modifiez l'emplacement de votre en-tête css sur icon.css dans vos répertoires. Assurez-vous simplement que le fichier .woff2 est toujours dans le même dossier que icon.css. N'hésitez pas à modifier les noms de fichiers longs.

Le titre de la question demande comment héberger les icônes matérielles hors ligne, mais le corps précise que l'objectif est d' utiliser les icônes matérielles hors ligne (c'est moi qui souligne) .

L'utilisation de votre propre copie des fichiers d'icônes de matériaux est une approche / implémentation valide. Un autre, pour ceux qui peuvent utiliser un service worker est de laisser le service worker s'en occuper. De cette façon, vous n'aurez pas les tracas d'obtenir une copie et de la tenir à jour.

Par exemple, générez un service worker à l'aide de Workbox , en utilisant l'approche la plus simple d'exécution de workbox-cli et en acceptant les valeurs par défaut, puis ajoutez le texte suivant au service worker généré:

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

Vous pouvez ensuite vérifier qu'il a été mis en cache dans Chrome en utilisant F12> Application> Stockage> IndexedDB et recherchez une entrée avec googleapis dans le nom.

À partir de 2020, mon approche consiste à utiliser le package material-icons-font . Il simplifie l'utilisation de Google icônes-conception-matériel de l' emballage et la communauté à base de matériel de conception-icônes iconfont .

1. Installez le package. npm install material-icons-font --save

2. Ajoutez le chemin du fichier CSS du package à la propriété style du fichier angular.json de votre projet.

   ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

3. Si vous utilisez SCSS, copiez le contenu ci-dessous en haut de votre fichier styles.scss.

   @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

4. Utilisez les icônes du fichier HTML de votre projet.

   // Using icon tag
   <i class="material-icons">face</i>
   <i class="material-icons md-48">face</i>
   <i class="material-icons md-light md-inactive">face</i>
   
   // Using Angular Material's <mat-icon> tag
   <mat-icon>face</mat-icon>
   <mat-icon>add_circle</mat-icon>
   <mat-icon>add_circle_outline</mat-icon>

Les icônes de @ angular / material ont tendance à se briser lors du développement hors ligne. L'ajout du package material-icons-font en conjonction avec @ angular / material vous permet d'utiliser la balise tout en développant hors ligne.

Installer le package npm

npm install material-design-icons --save

Placez le chemin du fichier css dans le fichier styles.css

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

La méthode Kaloyan Stamatov est la meilleure. Allez d'abord sur https://fonts.googleapis.com/icon?family=Material+Icons . et copiez le fichier css. le contenu ressemble à ceci

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.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;
}

Collez la source de la police dans le navigateur pour télécharger le fichier woff2 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Puis remplacez le fichier dans la source d'origine. Vous pouvez le renommer si vous le souhaitez. Pas besoin de télécharger un fichier de 60 Mo à partir de github. Dead simple Mon code ressemble à ceci

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.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;
}

tandis que materialIcon.woff2 est le fichier woff2 téléchargé et remplacé.

npm install material-design-icons

et

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

travaillé aussi pour moi avec Angular Material 8

Ajouté ceci à la configuration Web et l'erreur a disparu

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

Au fait, une vidéo est disponible sur youtube avec des instructions étape par étape.

https://youtu.be/7j6eOkhISzk

1. Voici les étapes. Téléchargez le package d'icônes Materialise sur https://github.com/google/material-design-icons/releases

2. Copiez le dossier icon-font et renommez-le en icônes.

3. Ouvrez le fichier materialize.css et mettez à jour les chemins suivants:

une. de l'url (MaterialIcons-Regular.eot) à l'url (../ fonts / MaterialIcons-Regular.eot) b. du format url (MaterialIcons-Regular.woff2) ('woff2') au format url (../ fonts / MaterialIcons-Regular.woff2) ('woff2') c. du format url (MaterialIcons-Regular.woff) ('woff') au format url (../ fonts / MaterialIcons-Regular.woff) ('woff') d. du format url (MaterialIcons-Regular.ttf) ('truetype') au format url (../ fonts / MaterialIcons-Regular.ttf) ('truetype')

3. Copiez le materialize-icon.css dans votre dossier css et référencez-le dans votre fichier html.

Tout fonctionnera comme par magie!