Los iconos de material angular no funcionan


93

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:

esperado

Pero entiendo esto:

real

¿Tienes alguna sugerencia?


Puede que falte la fuente. o se carga más tarde.
Basavaraj Bhusani

@BasavarajBhusani ¿cómo puedo comprobar esto?

después de realizar las soluciones a continuación, debe borrar la memoria caché del navegador. funcionó para mí.
Aditya Yada

Respuestas:


183

¡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


10
Esta respuesta funcionó para mí, pero también pude agregar esta línea a styles.css y funcionó. @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
J. Chaney

17
También puede agregar: @import "~material-icons/iconfont/material-icons.css";to your styles.css
Pooshon Banerjee

5
@PooshonBanerjee material-icons es un proyecto separado que no es mantenido por el equipo de Angular Material.
Vedran

38

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

1
¡Esta es la forma angular adecuada de hacerlo!
Wilt

1
... y la forma correcta de hacerlo cuando se usa Angular para aplicaciones (como con Cordova)
CularBytes

Esto funciona para mi. En lugar de usar google api, instalo material design.
Max hace

25

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

Se enfrentó al problema cuando el icono no se mostraba y, en su lugar, se mostraba el texto Cerrar. Agregué la importación anterior en mi archivo scss y comenzó a mostrar el ícono 'X'. Gracias :)
vinsinraw

Tengo un proyecto angular 9 y después de importar el archivo de fuente del icono de material en .scss, sigue siendo el mismo problema, el icono de material no está visible, muestra la prueba 'visibilidad_off' en el archivo .apk creado con cordova. pero lo mismo funciona bien en localhost: 4200 ¿Entonces hay alguna otra solución?
Jignesh Gothadiya

11

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

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

11

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

5

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


2

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


2

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

                    }

¡Gracias! ¡He estado atrapado en esto durante horas!
Håvard Brynjulfsen

1

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


1

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

Por ejemplo : Material Icon proporciona filter_alt para

ingrese la descripción de la imagen aquí

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

pero aparece 😟

ingrese la descripción de la imagen aquí

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>

0

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>


-2
**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';
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.