web-dev-qa-db-fra.com

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

Je m'excuse si cette question est très simple, mais comment utilisez-vous les icônes de matière de 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 ne dispose pas d'une connexion Internet

javascripthtml5cordovamaterialize
79
Luke Tan

Méthode 2. Hébergement autonome Guide du développeur

Télécharger la dernière version de github (assets: fichier zip), décompressez et copiez le dossier iconfont, contenant les fichiers d'icônes de conception de matériel, dans votre projet local - https: // github .com/google/material-design-icons/releases

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

  • Remplacez la source dans l'attribut url de @ font-face, par le chemin relatif du dossier iconfont de votre projet local (où se trouvent les fichiers de police), 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>

NPM/Bower Packages

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

Utiliser bower

bower install material-design-icons --save

Utilisation de NPM

npm install material-design-icons --save

85
bfmags

Je construis pour Angular 4/5 et travaille souvent en mode hors connexion et les éléments suivants ont donc fonctionné pour moi. Installez d'abord le NPM:

npm install material-design-icons --save

Ajoutez ensuite les éléments suivants à styles.css:

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

Si vous utilisez le projet webpack, après

npm install material-design-icons --save

vous avez juste besoin de

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

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 était d'ouvrir le lien source d'icônes de matériau:

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.

16
Kaloyan Stamatov

Cela peut être une solution facile

Obtenez ceci référentiel qui est une fourchette de la référentiel d'origine Google 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, tout va bien.

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">
9
Md. Harun Or Rashid

Ma recette comporte trois étapes:

  1. installer le paquet material-design-icons

    npm install material-design-icons

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

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

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

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

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

    link- [ 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 ('truetype');

    Remarque: après le téléchargement, vous pouvez le renommer comme bon vous semble.

  3. Maintenant, allez à 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)

  1. 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 pouvant être utilisées.

3
Abhinav1602

Utilisez material-design-icons-iconfont

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

Le projet de Google material-design-icons est très peu d'entretien et obsolète pour un moment . Il y a un écart entre la version https://material.io/icons/ et la version material-design-icons .

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

  • material-design-icons jams npm install - tous les fichiers svg/xml/... non pertinents ont été supprimés
  • Les fichiers de polices sont toujours à jour directement à partir de Google Fonts CDN
  • Support pour 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 devez importer le fichier .css/.scss (et risque de modifier le chemin des polices)

Importation à l'aide de SCSS

Importer 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';

Ultérieurement, référencez l'icône de votre choix <i class="material-icons"> + icon-id + </i>

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

Page de démonstration

Il vient avec une lumière page de démonstration pour faciliter la recherche et le copier-coller des polices

image

3
Jossef Harush

Une fois que vous avez terminé 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';
}
2
Manolo Alvarez

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

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

Par exemple, générez un opérateur de service à l'aide de Workbox , en utilisant l'approche la plus simple consistant à exécuter workbox-cli et à accepter les valeurs par défaut, puis ajoutez le texte suivant à l'opérateur de service 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 à l'aide de F12> Application> Stockage> IndexedDB et rechercher une entrée avec googleapis dans le nom.

2
Joseph Simpson

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 actuel et créer des copies localisées pour utiliser les icônes hors connexion.

Voici comment.NB: Vous allez télécharger deux fichiers en tout icon.css et somefile.woff .

  1. Aller à l'URL suivant comme requis dans l'en-tête

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

Enregistrez la page sous le nom nom_fichier.css. La valeur par défaut est icon.css

  1. Cherchez une ligne comme celle-ci

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

  1. Visitez l'URL qui a la fin de .woff

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

  1. Vous devriez maintenant avoir les deux fichiers icon.css et 2fcrYFNa .... mY.wof22 , enregistrez-les tous les deux dans votre css. Maintenant, apportez des modifications dans votre emplacement d’en-tête css à icon.css dans vos répertoires. Assurez-vous simplement que le fichier .woff2 se trouve toujours dans le même dossier que icon.css. N'hésitez pas à éditer les noms de fichiers longs.

1
Joseph Quaye

Avec angular cli

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, attendez l'installation à faire, puis ajoutez-le à angular.json -> projets -> architecte -> 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"
            ],
1
Wlada

Mise à jour 2019 ici:

Pour auto-héberger vos icônes matérielles, les normales, arrondies, nettes, toutes les variantes. Allez les chercher à partir de ce dépôt: https://github.com/petergng/material-icon-font

Pour une raison quelconque, je ne sais pas pourquoi ces polices ne sont pas facilement accessibles depuis les référentiels Google.

Mais voilà.

Après avoir téléchargé le paquet, allez dans le dossier bin et vous verrez les quatre variantes. Bien sûr, vous avez le choix.

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

La url établira un lien vers l'emplacement des icônes dans votre projet.

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

Ainsi, les classes .material-icons-outlined, et .material-icons utilisent les mêmes valeurs par défaut. Si vous voulez utiliser .material-icons-sharp, ajoutez-le simplement aux deux noms de classe.

  1. Enfin, laissez-nous brancher la police que vous avez créée à l’étape 1.

    .material-icons { font-family: 'Material Icons'; }

    .material-icons-outlined { font-family: 'Material Icons Outline'; }

Encore une fois, pour utiliser plus de variantes, comme Sharp, ajoutez simplement son bloc comme les deux ci-dessus.

Une fois cela fait ... allez à votre HTML et utilisez vos icônes nouvellement frappées.

<i class="material-icons-outlined">hourglass_empty</i>

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

0
Wale

La méthode de Kaloyan Stamatov est la meilleure. D'abord, allez 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 le source primaire. 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é.

0
chris_wire