Visão geral do componente Angular Icon

    O componente Ignite UI for Angular Icon unifica famílias de ícones/fontes para que os desenvolvedores possam usá-los de forma intercambiável e adicionar ícones de material à marcação.

    Angular Icon Example

    Getting Started with Ignite UI for Angular Icon

    Para começar a usar o componente Ignite UI for Angular Icon, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxIconModule no seu arquivo app.module.ts.

    // app.module.ts

import { IgxIconModule } from 'igniteui-angular';
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxIconModule,
        ...
    ]
})
export class AppModule {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxIconComponent como uma dependência autônoma.

    // home.component.ts

import { IgxIconComponent } from 'igniteui-angular';
// import { IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: '<igx-icon [style.color]="color">home</igx-icon>',
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IgxIconComponent],
})
export class HomeComponent {
  public color = '#e41c77';
}

    Agora que você importou o módulo ou componente Ignite UI for Angular Icon, você pode começar a usar o componente igx-icon.

    Using the Angular Icon

    Icon Color

    Use a propriedade CSS style.color para alterar sua cor padrão:

    <igx-icon [style.color]="#e41c77">home</igx-icon>

    Inactive Icon

    Se você quiser desabilitar um ícone, você pode usar a propriedade active:

    <igx-icon [active]="false">volume_off</igx-icon>

    Content Projection

    Você pode definir ícones com projeção de conteúdo:

    <igx-icon>bluetooth</igx-icon>

    Icon Size

    Você pode personalizar os ícones usando CSS. Para alterar o tamanho de um ícone, use a variável CSS--size:

    .custom-size {
  --size: 56px;
}

    SVG Icons

    Você também pode usar uma imagem SVG como um ícone. Primeiro, injete a dependência IgxIconService. Neste exemplo, vamos injetá-la no construtor de um componente, mas você pode usá-la onde for necessária em seu código.

    Use o método addSvgIcon para importar o arquivo SVG no cache. Quando o SVG é armazenado em cache, ele pode ser usado em qualquer lugar no aplicativo. O nome do ícone e o caminho da URL do arquivo são os parâmetros obrigatórios do método; family também pode ser especificado. Depois disso, você pode usar os arquivos SVG na marcação HTML. Como alternativa, você pode usar o método addSvgIconFromText para importar um arquivo SVG, fornecendo o conteúdo de texto SVG em vez da URL do arquivo.

    • Tenha em mente que se houver dois ícones com o mesmo nome e a mesma família, o ícone SVG será exibido com prioridade.
    • É melhor não fornecer largura e altura da imagem no arquivo SVG.
    • Você pode precisar de scripts polyfill adicionais ("polyfills") para o Internet Explorer.
    constructor(private iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icons
    this.iconService.addSvgIcon('contains', '/assets/images/svg/contains.svg', 'filter-icons');
}

    <igx-icon name="contains" family="filter-icons"></igx-icon>

    Material Symbols

    Além disso, os usuários podem aproveitar os ícones Material mais recentes e suas variações de design incluídas na recém-criada Material Symbols Library. Para começar a usar Material Symbols, primeiro você precisa adicionar a biblioteca ao seu aplicativo:

    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/>

    Então precisamos injetar a dependência IgxIconService e fazer uso do seu método setFamily para que os Símbolos de Material possam funcionar com igx-icon:

    constructor(private iconService: IgxIconService) { }

public ngOnInit() {
    // registers a 'material-symbols-outlined' class to be applied to all igx-icons with 'material-symbols' font-family
    this.iconService.setFamily('material-symbols', { className: 'material-symbols-outlined', type: 'liga' });
}

    Agora, estamos prontos para adicionar o ícone desejado à nossa marcação e personalizá-lo usando estilos de fonte ajustáveis:

    <igx-icon family="material-symbols" name="diamond" class="custom-icon"></igx-icon>

    .custom-icon {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40;
}

    Para saber mais sobre os estilos dos Símbolos de Material, visite a official documentation.

    Server-side Rendering Note

    Note

    Caso você tenha implementado a lógica de renderização do lado do servidor em seu aplicativo usando Angular Universal e tenha usado o IgxIconService para registrar ícones, isso pode causar a seguinte exceção:

    > XMLHttpRequest is not defined. Could not fetch SVG from url. >

    Para evitar isso, execute as etapas listadas:

    1. Instale `xmlhttprequest`:
      npm i xmlhttprequest
    2. No topo do seu arquivo `server.ts`, adicione:
      (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

    Estilização

    Para começar a estilizar os ícones, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Seguindo a abordagem mais simples, criamos um novo tema que estende o icon-theme e aceita os parâmetros necessários para personalizar o ícone conforme desejado.

    $custom-icon-theme: icon-theme(
  $color: #1481b8,
  $disabled-color: #494949,
);

    O último passo é passar o tema do ícone personalizado em nossa aplicação:

    @include css-vars($custom-icon-theme);

    Demo

    Custom sizing

    Você pode usar a variável--size, direcionando diretamente o igx-icon:

    igx-icon {
  --size: 50px;
}

    Ou você pode usar a variável universal--igx-icon-size para atingir todas as instâncias:

    <div class="my-app">
  <igx-icon></igx-icon>
</div>

    .my-app {
  --igx-icon-size: 50px;
}

    Você também pode usar um dos tamanhos predefinidos, atribuindo-o à variável--ig-size. Os valores disponíveis para--ig-size são--ig-size-small,--ig-size-medium e--ig-size-large:

    igx-icon {
  --ig-size: var(--ig-size-medium);
}

    Saiba mais sobre isso no artigo Tamanho.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.