Los iconos de material angular no funcionan

He instalado Material para angular,

He importado en mi módulo de aplicación MatIconModule (con import { MatIconModule } from '@angular/material/icon';)

Lo agregué debajo de mis importaciones de ngmodule con:

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

He importado todas las hojas de estilo

Y también lo importé en el componente de mi aplicación que en realidad (intenta) usarlos (con otra import {MatIconModule} from '@angular/material/icon';línea al principio).

Pero los iconos de materiales aún no aparecen.

Por ejemplo, con esta línea:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

Espero algo como esto:

Pero entiendo esto:

¿Tienes alguna sugerencia?

¡Agregue una hoja de estilo CSS para iconos 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 .scssarchivo principal :

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

Debe importar MatIconModule y usar la siguiente URL en index.html

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

En mi caso, se aplicó un estilo que anula la familia de fuentes. Entonces, agregué un estilo de familia de fuentes explícitamente así:

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

La solución completa puede ser:

Paso uno

Tienes que importar MatIconModuleen tu proyecto, en mi proyecto importo el componente necesario en un archivo separado y luego lo importo en el AppModule, puedes usar esto o importarlos directamente:

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

Segundo paso

Cargue la fuente del icono en su index.html:

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

En mi caso, el nombre del icono que escribí no estaba asociado a ningún icono.

Puede comprobar los nombres correctos aquí: https://material.io/tools/icons/?style=baseline

En mi caso, los iconos no aparecieron porque arruiné mis fuentes al usar! Important. Sacar eso hizo que aparecieran los iconos.

Me encontré con el problema de que los iconos no se mostraban. Seguí los pasos proporcionados por Basavaraj Bhusani, sin embargo, todavía no funcionaba.

Encontré que el problema era que en mi scss, tenía el text-transform: uppercaseque estaba causando que el ícono solo mostrara el contenido 'arrow_forward'. Tuve que cambiar el text-transform: noneícono específicamente, de lo contrario, no se renderizaría.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

Me di cuenta de que nadie habló sobre la instalación de hammerJs al principio antes de importarlo a su aplicación. Bueno, para las personas que tienen un problema similar, primero debe importar hammerJs, puede usar NPM, Yarn o Google CDN para la instalación. Esta respuesta es para la instalación con NPM o Yarn:

NPM

npm install --save hammerjs

Hilo

yarn add hammerjs

Después de la instalación, impórtelo en el punto de entrada de su aplicación (por ejemplo, src / main.ts).

import 'hammerjs';

Si prefiere utilizar Google CDN, visite el material de Angular para obtener más explicaciones https://material.angular.io/guide/getting-started

Nombre de icono incorrecto : el nombre de algún icono de material es incorrecto.

Por ejemplo : Material Icon proporciona filter_alt para

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

pero aparece 😟

Solución: tenemos que usar filter_list_alt para el icono de tipo de embudo como

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

Si ha sobrescrito algún estilo de material angular existente o cualquier otro estilo que de alguna manera afecte al icono, puede causar un problema. Mueva el código del icono fuera de cualquier estilo y pruebe.

Para mí fue una variante de fuente: minúsculas;

Así que lo moví al elemento hijo. A continuación se muestra parte de la cuadrícula de material angular.

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

Simplemente agregue lo siguiente a su index.html:

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

**Add following code to your css**

 .material-icons {  
    /* 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';
}