Visão geral do serviço Angular Icon

O Ignite UI for Angular Icon Service permite que os desenvolvedores adicionem novos ícones de várias fontes às suas interfaces do usuário.

Introduction

O Ignite UI for Angular Icon Service fornece vários métodos que permitem aos usuários criar e gerenciar famílias de ícones.

O serviço de ícones pode ser importado diretamente do pacote Ignite UI for Angular.

import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxIconService } from 'igniteui-angular/core';


@Component({
    selector: 'app-root',
    standalone: true,
    imports: [ IgxIconComponent ]
})
export class AppComponent implements OnInit {
    constructor(public iconService: IgxIconService) {}
}

Adding Icon Families

Por padrão, o Serviço Ícone define sua família padrão paramaterial.

Adicionar novas famílias de ícones é feito usando osetFamily método do serviço de ícones. Ele cria uma entrada familiar com alguns metadados que instruem oigx-icon componente sobre o(s) ícone(s) que deve renderizar.

Vamos usar um exemplo prático para explicar como osetFamily método funciona:

/** 
* The icon service associates a given family name (provided by the user) 
* with a specific CSS class (as documented in the providing icon font) 
* and corresponding icon name (documented in the icon font).
* NOTE: Material is already the default family.
*/ 
iconService.setFamily('material', { className: 'material-icons', type: 'liga' });
iconService.setFamily('fa-solid', { className: 'fas', type: 'font', prefix: 'fa' });

O exemplo acima cria duas famílias de ícones: 'material' e 'fa-sólido'. Seus tipos são diferentes, amaterial família é registrada comoliga, enquanto afa-solid família é registrada comofont. A diferença entre os dois é como oigx-icon componente os renderizaria. Normalmente, o Font Awesome usa nomes de classes para especificar pontos de código para uma família de fontes, por isso definimos seu tipo parafont. Sempre que precisarmos depender de pontos de código para renderizar ícones, devemos definir o tipo parafont. A família Material Icons ainda é uma família de fontes, porém, a forma padrão de exibir um ícone é fornecer umligature nome, em vez de um nome de classe apontando para um ponto de código específico. Por isso, precisamos definir o tipo paraliga. Existe um terceiro tipo de família -svg, reservado para famílias de ícones que serão compostas por SVGs registrados pelo Serviço de Ícones.

Tendo registrado as duas famílias de fontes acima, agora podemos consumir seus ícones de forma padronizada via oigx-icon componente:

<igx-icon family="material" name="home"></igx-icon>
<igx-icon family="fa-solid" name="car"></igx-icon>

Você deve ter notado que, para amaterial família, usamos a ligaduraname como nome, enquanto no caso dafa-solid família especificamos oclassName para nome, que éfa-car só que remove ofa- prefixo como foi especificado quando registramos a família de ícones na etapa anterior.

Adding SVG Icons

O Serviço de Ícones Ignite UI for Angular nos permite associar imagens SVG a famílias e dar nomes a elas para que possam ser incluídas via oigx-icon componente da mesma forma que ícones baseados em fontes. Os SVGs devem ser resolvidos por meio de strings ou por URI absoluto para o ativo SVG.

// Add a new 'material' icon called 'my-icon' from an SVG file
iconService.addSvgIcon('my-icon', 'my-icon.svg', 'material');

// Add a new 'fa-solid' icon called 'my-icon' from string 
iconService.addSvgIconFromText('my-icon', '<svg>...</svg>', 'fa-solid');

Mais tarde na marcação:

<igx-icon family="material" name="my-icon"></igx-icon>
<igx-icon family="fa-solid" name="my-icon"></igx-icon>

Note que estamos adicionando ícones SVG personalizados a famílias de tiposliga efont Isso é possível porque osaddSvgIcon métodos eaddSvgIconFromText registram os ícones comosvg tipo implicitamente, permitindo que oigx-icon componente renderize corretamente o SVG.

Meta Families

O Ignite UI for Angular Icon Service nos permite criar mapas de pseudo-família que combinam ícones adicionados por meio da configuração de uma família de ícones de fonte ou da adição de SVGs sob um guarda-chuva comum para que seja mais fácil referenciá-los.

// The `setIconRef` sets an icon reference in the icon map,
// assuming material and fa-solid have been added as families,
iconService.setIconRef('home', 'my-family', { family: 'material', name: 'home' });
iconService.setIconRef('home-alt', 'my-family', { family: 'fa-solid', name: 'home' });
iconService.setIconRef('car', 'my-family', { family: 'fa-solid', name: 'car' });

Mais tarde na marcação:

<igx-icon family="my-family" name="home"></igx-icon>
<igx-icon family="my-family" name="home-alt"></igx-icon>
<igx-icon family="my-family" name="car"></igx-icon>

Icon Retrieval

É possível obter um ícone para um dadofamily e íconename para ler o íconetype original,name,family, eclassName.

const { family, className, name, type } = iconService.getIcon('my-family', 'car');

console.log(family); // -> 'fa-solid'
console.log(className); // -> 'fas'
console.log(name); // -> 'fa-car'
console.log(type); // -> 'font'

Internal Usage

A partir da versão 18.1.0 de Ignite UI for Angular, adicionamos um novosetFamily método que nos permite criar novas famílias de ícones no Serviço de Ícones e associá-los a classes, tipos e até prefixos CSS. Além disso, ícones usados internamente agora são todos declarados por referência em uma novadefault família com nomes com aliased (veja tabela abaixo).

Cognome	Ícone de destino	Target Family
add	add	material
add_child	adicionar filho	imx-icons
add_row	adicionar linha	imx-icons
arrow_back	arrow_back	material
arrow_drop_down	arrow_drop_up	material
arrow_forward	seta_para_frente	material
arrow_next	chevron_right	material
arrow_prev	chevron_left	material
case_sensitive	case-sensitive	imx-icons
carousel_next	seta_para_frente	material
carousel_prev	arrow_back	material
chevron_left	chevron_left	material
chevron_right	chevron_right	material
relógio	access_time	material
fechar	fechar	material
colapso	expand_less	material
confirmar	verificar	material
date_range	date_range	material
excluir	delete	material
drag_indicator	drag_indicator	material
editar	editar	material
erro	erro	material
expandir	expandir_mais	material
expand_more	expandir_mais	material
file_download	arquivo_download	material
filter_all	selecionar tudo	imx-icons
filter_before	é antes	imx-icons
filter_contains	Contém	imx-icons
filter_does_not_contain	não-contém-	imx-icons
filter_empty	está vazio	imx-icons
filter_equal	Equals	imx-icons
filter_false	é-falso	imx-icons
filter_greater_than	maior que	imx-icons
filter_greater_than_or_equal	maior ou igual	imx-icons
filter_in	está na	imx-icons
filter_last_month	último mês	imx-icons
filter_last_year	último ano	imx-icons
filter_less_than	menor que	imx-icons
filter_less_than_or_equal	menor que ou igual	imx-icons
filter_next_month	próximo mês	imx-icons
filter_next_year	próximo ano	imx-icons
filter_not_empty	não vazio	imx-icons
filter_not_equal	não igual	imx-icons
filter_not_null	não é nulo	imx-icons
filter_null	é-nulo	imx-icons
filter_starts_with	começa com	imx-icons
filter_this_month	este mês	imx-icons
filter_this_year	este ano	imx-icons
filter_today	Hoje	imx-icons
filter_true	é-verdade	imx-icons
filter_yesterday	Ontem	imx-icons
first_page	first_page	material
group_work	trabalho em grupo	material
esconder	visibilidade_desligada	material
import_export	import_export	material
input_collapse	arrow_drop_up	material
input_clear	claro	material
input_expand	arrow_drop_down	material
jump_down	pular para baixo	imx-icons
jump_up	pular para cima	imx-icons
last_page	last_page	material
more_vert	more_vert	material
próximo	navigate_next	material
alfinete	pino à esquerda	imx-icons
Prev	navigate_before	material
atualizar	atualizar	material
retirar	cancelar	material
procurar	procurar	material
selecionado	terminado	material
programa	visibilidade	material
sort_asc	arrow_upward	material
sort_desc	seta_para_baixo	material
Funções	Funções	material
table_rows	table_rows	material
Hoje	calendar_today	material
tree_collapse	expandir_mais	material
tree_expand	chevron_right	material
unfold_less	desdobrar_menos	material
unfold_more	unfold_more	material
Desafixar	desafixar à esquerda	imx-icons
view_column	view_column	material

Para aproveitar a alteração dos ícones internos por referência, em vez de criar modelos personalizados, você pode fazer o seguinte para substituir os ícones de expansão/recolhimento na combinação e selecionar componentes:

iconService.setIconRef('input_expand', 'default', {
    name: 'arrow_downward',
    family: 'material',
});

iconService.setIconRef('input_collapse', 'default', {
    name: 'arrow_upward',
    family: 'material',
});

Isso definirá os ícones de expandir e colapsar para asarrow_downward ligaduras earrow_upward, respectivamente, damaterial família de fontes para todos os componentes combo e select.

Aqui está um detalhamento de todos os ícones usados por cada componente:

Faixa de ação

Ícone	Descrição
add_child	Usado pelo menu pop-up.
add_row	Usado pelo menu pop-up.
more_vert	Usado pelo menu pop-up.

Calendário

Ícone	Descrição
arrow_prev	Usado pelo cabeçalho para navegar entre meses/anos.
arrow_next	Usado pelo cabeçalho para navegar entre meses/anos.

Carrossel

Ícone	Descrição
carousel_prev	Usado para navegar entre slides.
carousel_next	Usado para navegar entre slides.

Cavaco

Ícone	Descrição
selecionado	Usado para indicar que um chip está selecionado.
retirar	Usado para o botão remover.

Combo (incl. Simple Combo)

Ícone	Descrição
case_sensitive	Usado para indicar e alternar a filtragem que diferencia maiúsculas de minúsculas.
input_clear	Usado para o botão de limpeza.
input_expand	Usado para o botão de alternância quando o menu de combinação está recolhido.
input_collapse	Usado para o botão de alternância quando o menu de combinação é expandido.

Seletor de data

Ícone	Descrição
Hoje	Usado para o botão de alternância que aciona o seletor.
input_clear	Usado para o botão de limpeza.

Seletor de intervalo de datas

Ícone	Descrição
date_range	Usado para o botão de alternância que aciona o seletor.

Painel de expansão

Ícone	Descrição
expandir	Usado para o botão de alternância que aciona o estado expandido.
colapso	Usado para o botão de alternância que aciona o estado recolhido.

Grid

Ícone	Descrição
add	Usado no menu de filtro do Excel para adicionar entrada de filtro.
arrow_back	Usado em vários elementos da interface do usuário para mover uma coluna para trás.
arrow_drop_down	Usado em vários botões para indicar menus alternáveis.
arrow_forward	Usado em vários elementos da interface do usuário para mover uma coluna para frente.
Cancelar	Usado em vários elementos da interface do usuário para cancelar operações.
chevron_right	Usado para indicar menus expansíveis, como na filtragem de estilo do Excel.
fechar	Usado para fechar um menu expandido.
confirmar	Usado para confirmar uma operação.
drag_indicator	Usado para mostrar uma alça para indicar que um item pode ser arrastado.
erro	Usado em células editáveis para indicar entrada de dados incorreta.
expand_more	Usado pelo menu de filtragem do Excel para indicar a adição de mais filtros.
file_download	Usado pelo exportador de filtros do Excel.
filter_*	Usado para vários operandos de filtragem.
group_work	Usado pela área de soltar agrupar por.
esconder	Usado por vários elementos da interface do usuário para ocultar colunas.
import_export	Usado pelo seletor de dados de pivô para movimentação.
input_clear	Usado por campos de entrada para limpar dados de entrada.
próximo	Usado pelo menu de linha de filtragem para navegar entre as fichas.
alfinete	Usado por vários elementos da interface do usuário para fixação de coluna.
Prev	Usado pelo menu de linha de filtragem para navegar entre as fichas.
retirar	Usado por vários elementos da interface do usuário como um indicador de remoção.
atualizar	Usado pelo menu de linha de filtragem para recarregar os filtros.
selecionado	Usado por vários elementos da interface do usuário para indicar a seleção ativa.
programa	Usado por vários elementos da interface do usuário para mostrar colunas.
sort_asc	Usado por vários elementos da interface do usuário para indicar a direção da classificação.
sort_desc	Usado por vários elementos da interface do usuário para indicar a direção da classificação.
Funções	Usado pela grade dinâmica e pelos seletores de dados.
table_rows	Usado pelo seletor de dados da grade dinâmica.
tree_collapse	Usado por estrutura semelhante a uma árvore para mostrar menos detalhes.
tree_expand	Usado por estrutura semelhante a árvore para mostrar mais detalhes.
Desafixar	Usado por vários elementos da interface do usuário para fixação de coluna.
unfold_less	Usado pela grade hierárquica para recolher todas as linhas.
unfold_more	Usado pela grade hierárquica para expandir todas as linhas.
view_column	Usado pelo seletor de dados dinâmicos.

Grupo de Entrada

Ícone	Descrição
input_clear	Usado para o botão de limpeza.

Paginador

Ícone	Descrição
first_page	Usado pelo botão usado para navegar até a primeira página.
last_page	Usado pelo botão usado para navegar até a última página.
Prev	Usado pelo botão usado para navegar para a página anterior.
próximo	Usado pelo botão usado para navegar para a próxima página.

Construtor de consultas

Ícone	Descrição
add	Usado pelo botão para adicionar novas entradas de filtro.
fechar	Usado pelo botão que fecha o menu contextual.
editar	Usado pelo botão para editar entradas de filtro.
confirmar	Usado pelo botão para confirmar a adição de novas entradas de filtro.
desagrupar	Usado pelo botão para desagrupar entradas de filtro.
excluir	Usado pelo botão para excluir entradas de filtro.
filter_*	Usado para vários operandos de filtragem.

Selecionar

Ícone	Descrição
input_expand	Usado para o botão de alternância quando o menu de seleção é recolhido.
input_collapse	Usado para o botão de alternância quando o menu de seleção é expandido.

Guias

Ícone	Descrição
Prev	Usado pelo botão usado para navegar para a guia anterior.
próximo	Usado pelo botão usado para navegar para a próxima guia.

Seletor de tempo

Ícone	Descrição
relógio	Usado para o botão de alternância que aciona o seletor.

Árvore

Ícone	Descrição
tree_expand	Usado para o botão de alternância que aciona o seletor.
tree_collapse	Usado para o botão de alternância que aciona o seletor.

API

Aqui está um resumo rápido de todos os métodos disponíveis por meio do Ignite UI for Angular Icon Service.

Add Family

setFamily(name: string, meta: IconFamilyMeta): IgxIconService;

Icon References

Defina SOMENTE se NÃO já apresentar o mapa de ícones:

addIconRef(name: string, family: string, icon: IconMeta): void;

Defina uma referência de ícone no mapa de ícones (substituída se já estiver presente):

setIconRef(name: string, family: string, icon: IconMeta): void;

Referência de Obter e Ícone

getIconRef(family: string, name: string): IconReference;

SVG Icons

Do URI:

addSvgIcon(name: string, url: string, family: string, stripMeta = false): void;

Da string:

addSvgIconFromText(name: string, iconText: string, family: string, stripMeta = false): void;

API References

IgxIconService

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.