angular - how - material-design-icons npm

¿Cómo usar Material Design Icons en Angular 4?

Question

Quiero usar los íconos de https://materialdesignicons.com/ en mi proyecto angular 4. Las instrucciones en el sitio web solo cubren cómo incluirlo en Angular 1.x ( https://materialdesignicons.com/getting-started )

¿Cómo puedo incluir los íconos de diseño de Material para que pueda usarlos como <md-icon svgIcon="source"></md-icon> usando Angular Material y ng serve ?

NOTA: ¡Ya incluí los google material icons que son diferentes!

Answer 1

Con Bootstrap 4 y Angular esto funciona:

1) Ejecutar:

npm install material-design-icons --save

2) Añadir a styles.css o styles.scss

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

3) Vaya a: .. / node_modules / material-design-icons / iconfont / material-icons.css y asegúrese de que la sección sea exactamente como esta (''MaterialIcons-Regular.woff2'') ...:

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

4) Use el icono en html:

<i class="material-icons">visibility</i>

Answer 2

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 tu 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í:

<mat-icon>location_off</mat-icon>

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

Answer 3

Para todos los que usan scss:

npm install material-design-icons

en src / styles.scss

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

y en HTML como se describe here

<i class="material-icons">visibility</i>

Answer 4

Similar a la respuesta de @ creep3007, puede especificar la hoja de estilo en su .angular-cli.json :

1. Instalar el paquete npm

   npm install material-design-icons --save

2. Añade íconos de material a tu .angular-cli.json

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

3. Usalo

   <i class="material-icons">visibility</i>

Answer 5

Simplemente siga estos pasos:

1. Descargue mdi.svg desde https://materialdesignicons.com/getting-started debajo de la sección de Material Angular y colóquelo en su carpeta de assets , que se debe ubicar en (desde la raíz de su proyecto) /src/assets :

   https://materialdesignicons.com/getting-started

2. En el módulo de su aplicación (también app.module.ts 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úrese de incluir la carpeta de assets en .angular-cli.json en los assets (aunque de forma predeterminada, estará allí):

   {
        "apps": [
            {
                 ...
                 "assets": [
                     "assets"
                 ]
            }
        ]
   }

4. Finalmente, utilícelo a través del componente MatIcon con la entrada svgIcon :

   <mat-icon svgIcon="open-in-new"></mat-icon>

Actualizar

He cambiado las instrucciones para que funcione en versiones posteriores.

Answer 6

Tenga en cuenta que esta respuesta se aplica a los https://materialdesignicons.com/ y NO a los iconos del mismo nombre de Google. No entiendo por qué estas instrucciones no están en el archivo Léame, pero aquí tienes.

Primero, instale el paquete:

npm install @mdi/font --save

Luego, es necesario agregar la hoja de estilo a su archivo styles.scss . Agregué lo siguiente al final de mi archivo:

//---------------------------------------------------------------------------
// Material Design Icons (https://materialdesignicons.com/)
//---------------------------------------------------------------------------
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

Tenga en cuenta que $mdi-font-path es necesario para anular un conjunto predeterminado dentro de @mdi/font/scss/_variables.scss que hace que el compilador del paquete web se queje. Si olvida hacer esto, obtendrá una serie de errores, de la siguiente manera:

ERROR en ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss Module no encontrado: Error: No se puede resolver ''../fonts/materialdesignicons-webfont.eot'' in ''/ home / myRepo / myApp''

Edición : no estoy seguro de si esto es necesario (probablemente en algunos casos), pero también actualicé el elemento de styles archivo .angular-cli.json :

"styles": [
        "../node_modules/@mdi/icon/font/css/materialdesignicons.min.css",

Otra alternativa a la anterior, que resultó en que los iconos trabajaran con muy poco esfuerzo, fue importar el CSS directamente. En el archivo mecanografiado, reemplacé el elemento styleUrls (para evitar un error extraño con Karma):

 // styleUrls: [''./graphics-control.component.css''],
  styles: [require(''./my.component.css''),
           require(''../pathTo/node_modules/@mdi/font/css/materialdesignicons.min.css'')]