Los iconos de material angular no funcionan

Solución:

¡Agregue una hoja de estilo CSS para los íconos de materiales!

Agregue lo siguiente a su index.html:

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

Consulte – https://github.com/angular/material2/issues/7948

Para Angular 6+:

1. npm instale esto: npm install material-design-icons

2. agregue los estilos a angular.json:

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

Si usa SASS, solo necesita agregar esta línea a su .scss expediente:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

---

Si prefiere evitar obtener íconos de Google, también puede autohospedar los íconos como se describe en la Guía de íconos de materiales:

Para aquellos que buscan autohospedar la fuente web, es necesaria alguna configuración adicional. Aloje la fuente del icono en una ubicación, por ejemplo https://example.com/material-icons.woff y agregue la siguiente regla CSS:

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

Además, las reglas CSS para representar el icono deberán declararse para representar la fuente correctamente. Estas reglas se incluyen normalmente como parte de la hoja de estilo de fuentes web de Google, pero deberán incluirse manualmente en sus proyectos cuando se aloje por sí mismo la fuente:

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

---

---

Utiliza Nuestro Buscador