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

106

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

Luke Tan
fuente
Este artículo explica para Angular, el pensamiento podría ser útil para alguien, thecodeframework.com/…
Gagan

Respuestas:

112

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.


bfmags
fuente
¿Cómo haría esto para una aplicación GAP de teléfono donde no tendría un dominio?
Luke Tan
apunte a su carpeta local en la URL de origen de @ font-face: url ("iconfont / MaterialIcons-Regular.woff2" - respuesta actualizada
bfmags
Oye, ¿podrías dar una respuesta actualizada a esto? He descargado mis íconos mdl con npm.
TheBAST
1
Resolvió mi problema ... Solo quería señalar que solo necesitamos la iconfontcarpeta de todo el archivo.
securecurve
para que este tipo de "recurso de mover cdn se sirva localmente", generalmente valdría la pena tener un tiempo de respuesta promedio de más de 3000 solicitudes ANTES y DESPUÉS del cambio; se sorprendería de la frecuencia con la que no vale la pena, independientemente de su esfuerzo para lograrlo ...
Yordan Georgiev
36

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';
Richard Bown
fuente
10
cuando llame "npm install" espere espere espere lol ... pero funciona después de mucho tiempo
Sergio Cabral
2
@SergioCabral Afortunadamente hiciste el comentario sobre esperar, porque hubo alrededor de 5 veces que pensé que esta instalación no iba a ninguna parte ... :)
Alfa Bravo
1
Gracias, te encantó Esta es la mejor solución Gracias <3
Ali Jamal
Trabajando para mí también ... :)
Aupr
3
¿Alguna idea de cómo agregar iconos contorneados?
wutzebaer
20

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

Kaloyan Stamatov
fuente
¡Gracias! Tuve el mismo problema y esto me lo solucionó.
David
Resolví mi problema con este enfoque, pero luego encontré otro repositorio de git, desde donde obtengo la versión adecuada.
Kaloyan Stamatov
@ Kaloyan Stamatov sería bueno compartir ese repositorio de git ... ya que mucha gente tiene problemas con el repositorio oficial obsoleto :)
Grashopper
@Grashopper, ya no lo tengo. Lo siento
Kaloyan Stamatov
1
más actualizado en 2019, esta solución también funcionó para mí.
compt
17

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'
Vladislav Kosovskikh
fuente
7
No recomiendo hacer esto, este repositorio es demasiado grande, use una descripción. debajo de npmjs.com/package/material-design-icons-iconfont también noté que el navegador almacenará en caché fonts.googleapis.com/icon?family=Material+Icons y funcionará en el modo fuera de línea. Checkout keemor.github.io/#
keemor
Soy novato en npm, ¿puedes explicarme import materialIcons from 'material-design-icons/iconfont/material-icons.css'? ¿Añadimos esta línea a dónde? app.js o en otro lugar. Estoy usando framework7 con Vue y lo intenté. No funcionó para mí.
Suat Atan PhD
@SuatAtanPhD agrega esta importación como cualquier otra importación de estilo. Si usa el paquete web, necesita algo como style-loader, css-loader y puede colocar esta importación en cualquier lugar de su código js, ​​por ejemplo, en index.js o app.js, etc.
Vladislav Kosovskikh
1
Se recomienda este enfoque para crear una aplicación web corporativa que pueda funcionar en una red interna sin acceso a Internet
Yurii Bratchuk
13

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">
Md. Harun o Rashid
fuente
El uso del paquete material-design-icons-iconfont funciona incluso con el mat-iconcomponente estándar de Angular . Por tanto, la transición es perfecta.
Yuri
Esta es la solución que funcionó para mí, excepto que el enlace de la hoja de estilo en index.html no funcionó; tuve que agregar una importación en mi archivo Styles.scss: @import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css"; Luego, mis íconos alojados localmente cobraron vida
Ade
7

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>
romano
fuente
este paquete ya no existe
yehonatan yehezkel
con angular cli, npm instale material-design-icons y luego agregue css en angular.json -> architect->
build-
6

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>

Página de demostración

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

imagen

Jossef Harush
fuente
1
Tengo un problema con PWA. Los iconos funcionan mientras está en el navegador, pero una vez que agrega un acceso directo en la pantalla de inicio y ejecuta, los iconos de la aplicación no se muestran.
Wlada
4

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)


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

abhinav1602
fuente
404 en su enlace
Welyngton Dal Prá
1
@ WelyngtonDalPrá Gracias. corregido
abhinav1602 hace
3

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';
}
Manolo alvarez
fuente
3

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"
            ],
Wlada
fuente
3

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.

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

  1. 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>
Wale
fuente
2

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

  1. Busca una línea como esta

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

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

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

Joseph Quaye
fuente
2

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.

Joseph Simpson
fuente
Conseguí que esto funcionara también con algunos pequeños cambios. Cambié "workboxSW" a "workbox". Cambié "enrutador" a "enrutamiento" y agregué este código en mi archivo sw_config.js que se genera cuando se usa el asistente de cli de la caja de trabajo.
Jason Allshorn
2

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.

HelloWorldPeace
fuente
0

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";
Ahmet Arslan
fuente
0

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.

chris_wire
fuente
1
No funciona en todos los navegadores, consulte esta respuesta SO para obtener más información: stackoverflow.com/questions/11002820/…
xaviert
-1
npm install material-design-icons

y

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

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

lado105
fuente
-1

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>
tfa
fuente
-1

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

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

¡Todo funcionará como por arte de magia!

SicMundus
fuente