¿Cómo alojar iconos de material sin conexión?

Mis disculpas si esta es una pregunta muy simple, pero ¿cómo se usan los íconos de material de Google sin un

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

?

Me gustaría que mi aplicación pudiera mostrar los íconos incluso cuando el usuario no tiene conexión a Internet

Método 2. Guía para desarrolladores de autohospedaje

Descargue la última versión de github (assets: archivo zip), descomprima y copie la carpeta iconfont, que contiene los archivos de iconos de material design, en su proyecto local: https://github.com/google/material-design-icons/ lanzamientos

Solo necesita usar la carpeta iconfont del archivo: contiene las fuentes de los iconos en los diferentes formatos (para soporte de múltiples navegadores) y CSS repetitivo.

• Reemplace la fuente en el atributo url de @ font-face, con la ruta relativa a la carpeta iconfont en su proyecto local, (donde se encuentran los archivos de fuentes), por ejemplo. 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>

Paquetes NPM / Bower

Google tiene oficialmente una opción de dependencia de Bower y NPM: siga la Guía de iconos de material 1

Usando bower :bower install material-design-icons --save

Usando NPM :npm install material-design-icons --save

Iconos de materiales : busque alternativamente en la fuente de iconos de Material Design y el marco CSS para el alojamiento de los iconos, desde https://marella.me/material-icons/ de @ marella

Nota

Parece que Google tiene el proyecto en modo de bajo mantenimiento. El último lanzamiento fue, al momento de escribir, ¡hace 3 años!

Hay varios problemas en GitHub con respecto a esto, pero me gustaría referirme al comentario de @cyberalien sobre el problema Is this project actively maintained? #951donde se refiere a varios proyectos comunitarios que se bifurcaron y continúan manteniendo íconos de materiales.

Estoy construyendo para Angular 4/5 y, a menudo, trabajo sin conexión, por lo que lo siguiente funcionó para mí. Primero instale el NPM:

npm install material-design-icons --save

Luego agregue lo siguiente a styles.css:

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

Los enfoques superiores no me funcionan. Descargué los archivos de github, pero el navegador no cargó las fuentes.

Lo que hice fue abrir el enlace de origen del icono de material:

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

y vi este marcado:

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

Abro el enlace de URL de fuente woff https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

y descargue el archivo woff2.

Luego reemplazo la ruta del archivo woff2 con la nueva en 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');
}

Eso hace que las cosas funcionen para mí.

Si usa el proyecto webpack, después

npm install material-design-icons --save

solo necesitas

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

Esta puede ser una solución fácil

Obtenga este repositorio que es una bifurcación del repositorio original publicó Google.

Instálelo con bower o npm

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

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

Importe el archivo css en su página HTML

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

o

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

Prueba: agregue un icono dentro de la etiqueta del cuerpo de su archivo HTML

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

Si ve el icono de la cara, está bien.

Si no funciona, intente agregar esto ..como prefijo a la node_modulesruta:

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

Mi receta tiene tres pasos:

1. para instalar el paquete material-design-icons

   npm install material-design-icons

2. para importar el archivo material-icons.css a un archivo / proyecto .less o .scss

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

3. para incluir el código recomendado en el archivo / proyecto reactjs .js

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

Utilice material-design-icons-iconfont

Divulgación completa, soy el autor de este paquete

El proyecto de material-design-icons de Google tiene poco mantenimiento y está desactualizado por un tiempo . Hay una brecha entre la versión en https://material.io/icons/ y la versión en material-design-icons .

He creado material-design-icons-iconfont para abordar estos problemas importantes:

• material-design-icons jamsnpm install : todos los archivos svg / xml / ... irrelevantes se han eliminado
• Los archivos de fuentes siempre están actualizados directamente desde Google Fonts CDN
• Soporte para scss

Instalar a través de npm

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

Depende de cómo empaquete su aplicación web ( webpack/ gulp/ bower/ ...), deberá importar el archivo .css/ .scss(y podría cambiar la ruta de las fuentes relativas)

Importar usando SCSS

Importar en uno de sus archivos sass

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

Más adelante, haga referencia a su icono deseado <i class="material-icons">+ id-icono +</i>

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

• lea las instrucciones completas en material-design-icons-iconfont para obtener más métodos de importación

Página de demostración

Viene con una página de demostración ligera para ayudar a buscar y copiar y pegar fuentes

Intenté compilar todo lo que se debe hacer para los íconos de autohospedaje en mi respuesta. Debes seguir estos 4 sencillos pasos.

1. Abra la carpeta iconfont del repositorio materialise

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

2. Descargue estos tres archivos de iconos ->

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

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

   MaterialIcons-Regular.ttf - formato ('truetype');

   Nota: después de la descarga, puede cambiarle el nombre por el que desee.

3. Ahora, vaya a su CSS y agregue este código

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

Nota: La dirección proporcionada en src: url (...) debe ser con respecto al 'Archivo CSS' y no al archivo index.html. Por ejemplo, puede ser src: url (../ myicons / MaterialIcons-Regular.woff2)

4. Está listo para usar ahora y aquí es cómo se puede hacer en HTML

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

Haga clic aquí para ver todos los iconos que se pueden utilizar.

Una vez que lo haya hecho npm install material-design-icons, agregue esto en su archivo 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';
}

Con cli angular

npm install angular-material-icons --save

o

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

material-design-icons-iconfont es la última versión actualizada de los iconos. angular-material-icons no se actualiza durante mucho tiempo

Espere, espere, espere a que se realice la instalación y luego agréguelo a angular.json -> proyectos -> arquitecto -> estilos

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

o si instaló material-desing-icons-iconfont entonces

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

Actualización de 2019 aquí:

Para alojar sus íconos de material, los regulares, redondeados, nítidos, todas las variantes. Ve a buscarlos de este repositorio: https://github.com/petergng/material-icon-font

Por alguna razón, no sé por qué estas fuentes no son fácilmente accesibles desde los repositorios de Google.

Pero aquí tienes.

Después de descargar el paquete, vaya a la carpeta bin y verá las cuatro variantes. Por supuesto, depende de usted utilizar el que sea.

Para usarlos, cree un archivo css y

1. Genere un tipo de letra para cada variante que necesite:

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

Se urlvinculará a la ubicación de los íconos en su proyecto.

2. Ahora registremos las clases de iconos:

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

Esto hará que ambas clases .material-icons-outlined, y .material-iconsutilicen los mismos valores predeterminados. Si desea utilizarlo .material-icons-sharp, simplemente añádalo a los dos nombres de clase.

3. Finalmente, conectemos la fuente que sacó del paso 1.

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

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

Nuevamente, para usar más variantes, como Sharp, simplemente agregue su bloque como los dos anteriores.

Una vez hecho esto ... vaya a su html y use sus íconos recién creados.

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

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

En http://materialize.com/icons.html la información de encabezado de estilo que incluye en la página, puede ir al hipervínculo real y hacer copias localizadas para usar los iconos sin conexión.

NB: Descargará dos archivos en todos los archivos icon.css y somefile.woff .

1. Vaya a la siguiente URL según se requiera en el encabezado

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

Guarde la página como any_filename.css. El valor predeterminado es icon.css

2. Busca una línea como esta

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

3. Visite la URL que tiene .woff finalizándola

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. Su navegador lo descargará automáticamente. Guárdelo en su carpeta CSS.

4. Ahora debería tener los dos archivos icon.css y 2fcrYFNa .... mY.wof22 , guárdelos en su css. Ahora realice ediciones en la ubicación del encabezado css en icon.css en sus directorios. Solo asegúrese de que el archivo .woff2 esté siempre en la misma carpeta que icon.css. Siéntase libre de editar los nombres de archivo largos.

El título de la pregunta pregunta cómo alojar íconos de material sin conexión, pero el cuerpo aclara que el objetivo es usar los íconos de material sin conexión (el énfasis es mío) .

Usar su propia copia de los archivos de iconos de material es un enfoque / implementación válido. Otro, para aquellos que pueden utilizar un trabajador de servicios es dejar que el trabajador de servicios se encargue de ello. De esa manera, no tendrá la molestia de obtener una copia y mantenerla actualizada.

Por ejemplo, genere un trabajador de servicio usando Workbox , usando el enfoque más simple de ejecutar workbox-cli y aceptando los valores predeterminados, luego agregue el siguiente texto al trabajador de servicio generado:

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

Luego puede verificar que se almacenó en caché en Chrome usando F12> Aplicación> Almacenamiento> IndexedDB y busque una entrada con googleapis en el nombre.

A partir de 2020, mi enfoque es utilizar el paquete material-icons-font . Simplifica el uso del paquete material-design-icons de Google y el material-design-icons-iconfont basado en la comunidad .

1. Instale el paquete. npm install material-icons-font --save

2. Agregue la ruta del archivo CSS del paquete a la propiedad de estilo del archivo angular.json de su proyecto.

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

3. Si usa SCSS, copie el contenido a continuación en la parte superior de su archivo 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. Utilice los iconos del archivo HTML de su proyecto.

   // 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>

Los iconos de @ angular / material tienden a romperse cuando se desarrolla fuera de línea. Agregar el paquete material-icons-font junto con @ angular / material le permite usar la etiqueta mientras desarrolla sin conexión.

Instalar el paquete npm

npm install material-design-icons --save

Coloque la ruta del archivo css en el archivo styles.css

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

El método Kaloyan Stamatov es el mejor. Primero vaya a https://fonts.googleapis.com/icon?family=Material+Icons . y copie el archivo css. el contenido se ve así

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

Pegue la fuente de la fuente en el navegador para descargar el archivo woff2 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Luego reemplace el archivo en la fuente original. Puede cambiarle el nombre si lo desea. No es necesario descargar un archivo de 60 MB de github. Muerto simple Mi código se ve así

@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;
}

mientras que materialIcon.woff2 es el archivo woff2 descargado y reemplazado.

npm install material-design-icons

y

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

también funcionó para mí con Angular Material 8

Agregué esto a la configuración web y el error desapareció

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

Por cierto, hay un video disponible en youtube con instrucciones paso a paso.

https://youtu.be/7j6eOkhISzk

1. Estos son los pasos. Descargue el paquete de íconos materialize de https://github.com/google/material-design-icons/releases

2. Copie la carpeta de fuentes de iconos y cámbiele el nombre a iconos.

3. Abra el archivo materialize.css y actualice las siguientes rutas:

a. de url (MaterialIcons-Regular.eot) a url (../ fonts / MaterialIcons-Regular.eot) b. desde el formato url (MaterialIcons-Regular.woff2) ('woff2') al formato url (../ fonts / MaterialIcons-Regular.woff2) ('woff2') c. desde el formato url (MaterialIcons-Regular.woff) ('woff') al formato url (../ fonts / MaterialIcons-Regular.woff) ('woff') d. del formato url (MaterialIcons-Regular.ttf) ('truetype') al formato url (../ fonts / MaterialIcons-Regular.ttf) ('truetype')

3. Copie materialize-icon.css en su carpeta css y haga referencia a él en su archivo html.

¡Todo funcionará como por arte de magia!