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 issoIgxIconModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importar comoIgxIconComponent uma dependência independente.

// home.component.ts

import { IgxIconComponent } from 'igniteui-angular/icon';
// 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, pode começar a usar oigx-icon componente.

Using the Angular Icon

Icon Color

Usestyle.color a propriedade CSS para mudar a cor padrão dela:

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

Inactive Icon

Se quiser desativar um ícone, pode usar a propriedadeactive:

<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--size variável CSS:

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

SVG Icons

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

Use oaddSvgIcon método para importar o arquivo SVG no cache. Quando o SVG está armazenado em cache, ele pode ser usado em qualquer lugar da aplicação. O nome do ícone e o caminho da URL do arquivo são os parâmetros obrigatórios do método; A família também pode ser especificada. Depois disso, você pode usar os arquivos SVG na marcação HTML. Alternativamente, você pode usar oaddSvgIconFromText método para importar um arquivo SVG, fornecendo o conteúdo do 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 mais recentes do Material e suas variações de design incluídos no novo modeloMaterial 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"/>

Depois, precisamos injetar aIgxIconService dependência e utilizar seusetFamily método para que os Símbolos Materiais possam trabalhar comigx-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 de Símbolos Materiais, por favor visite o site delesofficial documentation.

Server-side Rendering Note

Note

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

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

Para evitar isso, execute os passos listados:

Instale `xmlhttprequest`:
```
npm i xmlhttprequest
```

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 oindex arquivo, onde todas as funções de tema e os componentes estão ativos:

@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 eicon-theme 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

SVG Limitations

É importante notar que, ao usar ícones SVG personalizados, elesicon-theme podem aplicar e sobrescrever cores apenas no<svg> próprio elemento. Se o SVG contém elementos filhos como<path>,<rect>,<circle>,<g>, etc., com valores de cor codificados fixamente, essas cores não podem ser sobrescrevidas pelo tema.

Por exemplo:

<svg>
    <path fill="#050d42"/>
</svg>

Nesse caso, o ícone sempre usará a#050d42 cor definida no tema<path>, independentemente da cor fornecida pelo tema.

<svg fill="#050d42">
    <path .../>
</svg>

Aqui, a cor de preenchimento é aplicada ao<svg> elemento, para que ela possa ser substituída por uma cor personalizada fornecida via.icon-theme

Recomendamos não usar cores codificadas fixamente em elementos filho SVG para que o ícone possa ser estilizado inteiramente usando oicon-theme. No entanto, se você ainda quiser aplicar cores codificadas fixamente aos elementos filhos, também pode usar as variáveis de cor Ignite UI.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <!-- This element uses the theme color from the igx-icon component -->
  <path d="M12 2L15 8H9L12 2Z" />

  <!-- This element uses an accent color from Ignite UI palette -->
  <circle cx="12" cy="17" r="4" fill="var(--ig-primary-500)" />
</svg>

Custom sizing

Você pode usar a--size variável, direcionando diretamente oigx-icon seguinte:

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

Ou você pode usar a variável universal--igx-icon-size para direcionar 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 à--ig-size variável. 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.

Styling with Tailwind

Você pode usaricon nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-icon,dark-icon.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema de ícones. A sintaxe é a seguinte:

<igx-icon class="!light-icon ![--color:#7B9E89] ![--size:48px]">person</igx-icon>

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, seu ícone deve parecer assim:

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Visão geral do componente Angular Icon

Angular Icon Example

Getting Started with Ignite UI for Angular Icon

Using the Angular Icon

Icon Color

Inactive Icon

Content Projection

Icon Size

SVG Icons

Material Symbols

Server-side Rendering Note

Note

Estilização

Demo

SVG Limitations

Custom sizing

Styling with Tailwind

Note

API References

Additional Resources

Temas