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, IgxIconService } from 'igniteui-angular';


@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 de Ícones define sua família padrão como material.

A adição de novas famílias de ícones é feita usando o setFamily método do serviço de ícones. Ele cria uma entrada de família com alguns metadados que instruem o igx-icon componente sobre o(s) ícone(s) que ele deve renderizar.

Vamos usar um exemplo prático para explicar como o setFamily 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, a material família é registrada como liga, enquanto a fa-solid família é registrada como font. A diferença entre os dois é como o igx-icon componente os renderizaria. Normalmente, o Font Awesome usa nomes de classe para especificar pontos de código para uma família de fontes, por isso definimos seu tipo como font. Sempre que tivermos que confiar em pontos de código para renderizar ícones, devemos definir o tipo como font. A família Material Icons ainda é uma família de fontes, no entanto, a maneira padrão de exibir um ícone é fornecer um ligature nome, em vez de um nome de classe apontando para um ponto de código específico. Por esse motivo, precisamos definir o tipo como liga. Há um terceiro tipo de família -svg, ele é reservado para famílias de ícones que serão compostas por SVGs registrados por meio do Serviço de Ícones.

Tendo registrado as duas famílias de fontes acima, agora podemos consumir seus ícones de forma padronizada por meio do igx-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 a material família, usamos a ligadura name como nome, enquanto no caso da família, especificamos o className nome for, que é fa-car apenas descartar o prefixo fa-como foi especificado quando registramos a família de fa-solid ícones na etapa anterior.

Adding SVG Icons

O Ignite UI for Angular Icon Service nos permite associar imagens SVG a famílias e dar-lhes nomes para que possam ser incluídas por meio do componente da mesma forma que os igx-icon ícones baseados em fontes. Os SVGs devem ser resolvidos por meio de strings ou por meio de 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>

Observe que estamos adicionando ícones SVG personalizados a famílias do tipo liga e font. Isso é possível porque os addSvgIcon métodos and addSvgIconFromText registram os ícones como svg tipo implicitamente, permitindo que o igx-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 determinado family ícone e name para ler o ícone type original, name, family, e className.

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 do Ignite UI for Angular, adicionamos um novo setFamily método que nos permite criar novas famílias de ícones no Icon Service e associá-los a classes, tipos e até prefixos CSS. Além disso, os ícones usados internamente agora são todos declarados por referência em uma nova default família com nomes com alias (consulte a 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 expansão e recolhimento para as arrow_downward ligaduras e arrow_upward, respectivamente, da material família de fontes para todos os componentes de combinação e seleção.

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. Combo Simples)

Í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.

Grade

Í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_dowload	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.