Ícones de materiais estendidos

    O Ignite UI Material Icons Extended é um subconjunto de ícones que estende o conjunto de ícones de material do Google.

    Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas de Angular completo e comece a criar seus próprios aplicativos em minutos. Faça o download gratuitamente.

    Installation

    npm install @igniteui/material-icons-extended

    Usage

    Primeiro, vamos ver como podemos registrar um único ícone em nosso componente:

    import { Component, OnInit } from '@angular/core';
import { IgxIconService } from 'igniteui-angular';
// import { IgxIconService } from '@infragistics/igniteui-angular'; for licensed package
import { github } from '@igniteui/material-icons-extended';
// ...
export class SampleComponent implements OnInit {
  constructor(private iconService: IgxIconService) {}

  ngOnInit(): void {
    // Register a single icon
    this.iconService.addSvgIconFromText(github.name, github.value, 'imx-icons');
  }
}

    Agora, vamos ver como registrar vários ícones/categorias:

    //...
import { health, programming } from '@igniteui/material-icons-extended';

export class SampleComponent implements OnInit {
  public allIcons = [
    ...health,
    ...programming,
  ];
  //...
  addIcons() {
    for (let icon of this.allIcons) {
      this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
    }
  }

  ngOnInit(): void {
    this.addIcons();
  }
}

    Para usar os ícones no seu modelo de componente:

    <igx-icon family="imx-icons" name="github"></igx-icon>

    Para mais informações e outros tipos de uso, acesse nosso Repositório GitHub.

    Additional Resources

    IgxIconService

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.