¿Cómo usar los íconos de Material Design en Angular 4?

Esta es la respuesta más acertada que encomtrarás dar, sin embargo obsérvala pausadamente y valora si es compatible a tu trabajo.

Solución:

Para aquellos que prefieren usar SCSS:

Instalar la fuente

$> npm install material-design-icons

importar en src/styles.scss

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

y utilícelo en HTML como se describe aquí

visibility

Para referirme al comentario de Sam Claus, gracias por esto, he agregado la instalación y el uso de los íconos de diseño de Templarian. Es similar al de arriba.

Instale la fuente a través del administrador de paquetes

$> npm install @mdi/font

importar la hoja de estilo en src/styles.scsso en angular.json como se describe en el comentario de A. Morel aquí

@import '[email protected]/font/css/materialdesignicons.css';

o usando la URL de CDN en index.html o donde sea y utilícela en HTML como se describe aquí

Apéndice: Mi respuesta es un poco más antigua. Esto todavía funciona bien, pero ya no es lo último en tecnología. La respuesta de A. Morel aquí es un poco más contemporánea.

Las instrucciones sobre cómo incluir iconos de Material Design en su aplicación Angular Material ahora se pueden encontrar en la página de documentación de Material Design Icons – Angular.

TL; DR: ahora puede aprovechar el @mdi/angular-material Paquete NPM que incluye los íconos MDI distribuidos como un solo archivo SVG (mdi.svg):

npm install @mdi/angular-material

Este archivo SVG se puede incluir en su aplicación incluyéndolo en el archivo de su proyecto. assets propiedad de configuración en angular.json:

  // ...
  "architect": 
    "build": 
      "options": 
        "assets": [
           "glob": "**/*", "input": "./assets/", "output": "./assets/" ,
           "glob": "favicon.ico", "input": "./", "output": "./" ,
           "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" 
        ]
      
    
  
  // ...

El módulo principal de su aplicación también necesitará las importaciones necesarias (HttpClientModule desde @angular/common/http utilizado para cargar los iconos y MatIconModule desde @angular/material/icon) a declarar, además de agregar el conjunto de iconos al registro:

import  HttpClientModule  from '@angular/common/http';
import  NgModule  from '@angular/core';
import  MatIconModule, MatIconRegistry  from '@angular/material/icon';
import  DomSanitizer  from '@angular/platform-browser';

@NgModule(
  imports: [
    // ...
    HttpClientModule,
    MatIconModule
  ]
)
export class AppModule 
  constructor(iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) 
    iconRegistry.addSvgIconSet(
      domSanitizer.bypassSecurityResourceHtml('./assets/mdi.svg')
    );
  

También está disponible una demostración de StackBlitz.

Los pasos para versiones anteriores de Angular se mencionan a continuación:

---

Simplemente sigue estos pasos:

1. Descargar mdi.svg de aquí bajo el Material angular sección y colóquelo en su assets carpeta, que debe estar ubicada en (desde la raíz de su proyecto) /src/assets:

   

   

2. En el módulo de su aplicación (también conocido como app.module.ts), agregue las siguientes líneas:

   import MatIconRegistry from '@angular/material/icon';
   import DomSanitizer from '@angular/platform-browser';
   ...
   export class AppModule 
     constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer)
       matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityResourceUrl('/assets/mdi.svg'));
     
   
   

3. Asegúrate de incluir assets carpeta debajo .angular-cli.json en assets (Aunque por defecto estará allí):

   
     "apps": [
       
         ...
         "assets": [
           "assets"
         ]
       
     ]
   
   

4. Finalmente, utilícelo a través de la MatIcon componente con el svgIcon aporte:

Instalar el paquete npm

npm install material-design-icons --save
npm install --save @angular/material @angular/cdk

Agregue iconos de material css a su .angular-cli.json (no olvide reiniciar “ng serve”)

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

o en su src/styles.scss

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

Módulo de importación en su app.module.ts

import  MatIconModule  from '@angular/material/icon';

…

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

Y úsalo así:

location_off

Elija el nombre de Material Design Icons => https://material.io/tools/icons/?style=baseline

Eres capaz de auxiliar nuestra faena dejando un comentario y dejando una valoración te damos la bienvenida.

---

---

Utiliza Nuestro Buscador