Descripción general del servicio de iconos Angular

El servicio de iconos de Ignite UI for Angular permite a los desarrolladores agregar nuevos iconos de varias fuentes a sus interfaces de usuario.

Introduction

El servicio de iconos de Ignite UI for Angular proporciona varios métodos que permiten a los usuarios crear y administrar familias de iconos.

El servicio de iconos se puede importar directamente desde el paquete 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 defecto, el Servicio de Iconos establece su familia predeterminada en.material

Añadir nuevas familias de iconos se realiza utilizando elsetFamily método del servicio de iconos. Crea una entrada familiar con algunos metadatos que indican aligx-icon componente sobre el(los) icono(s) que debe renderizar.

Usemos un ejemplo práctico para explicar cómo funciona elsetFamily método:

/** 
* 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' });

El ejemplo anterior crea dos familias de iconos: 'material' y 'fa-solid'. Sus tipos son diferentes, lamaterial familia está registrada comoliga y lafa-solid familia está registrada comofont. La diferencia entre ambos es cómo eligx-icon componente los renderizaría. Normalmente, Font Awesome utiliza nombres de clase para especificar puntos de código a una familia de fuentes, por eso establecemos su tipo comofont. Cada vez que tengamos que depender de puntos de código para renderizar iconos, deberíamos poner el tipo enfont. La familia de Iconos Materiales sigue siendo una familia de fuentes, sin embargo, la forma estándar de mostrar un icono es proporcionar unligature nombre, en lugar de que el nombre de una clase apunte a un punto de código específico. Por eso, necesitamos establecer el tipo comoliga. Hay un tercer tipo de familia -svg, reservado para familias de iconos que estarán formadas por SVGs registrados a través del Servicio de Iconos.

Tras registrar las dos familias de fuentes anteriores, ahora podemos consumir sus iconos de forma estandarizada a través deligx-icon componente:

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

Quizá hayas notado que para lamaterial familia usamos la ligaduraname como nombre, mientras que en el caso de lafa-solid familia especificamos elclassName para el nombre, que esfa-car pero eliminamos elfa- prefijo tal como se especificó cuando registramos la familia de iconos en el paso anterior.

Adding SVG Icons

El servicio de iconos Ignite UI for Angular nos permite asociar imágenes SVG con familias y darles nombres para que puedan incluirse a través deligx-icon componente de la misma manera que los iconos basados en fuentes. Los SVG deben resolverse mediante cadenas o mediante URI absoluto al activo 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');

Más adelante en el marcado:

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

Ten en cuenta que estamos añadiendo iconos SVG personalizados a familias de tiposliga yfont. Esto es posible porque losaddSvgIcon métodos yaddSvgIconFromText registran los iconos comosvg tipo de forma implícita, permitiendo que eligx-icon componente renderice correctamente el SVG.

Meta Families

El servicio de iconos de Ignite UI for Angular nos permite crear pseudo mapas familiares que combinan iconos añadidos mediante la configuración de una familia de iconos de fuentes o la adición de SVG bajo un paraguas común para que sea más fácil hacer referencia a ellos.

// 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' });

Más adelante en el marcado:

<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

Es posible obtener un icono para un icono dadofamily y para leer el icononame original,type,name, yfamily.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 de la versión 18.1.0 de Ignite UI for Angular, añadimos un nuevosetFamily método que nos permite crear nuevas familias de iconos en el Servicio de Iconos y asociarlos con clases, tipos e incluso prefijos CSS. Además, los iconos usados internamente ahora se declaran por referencia en una nuevadefault familia con nombres aliasados (véase la tabla que sigue en el grupo).

Alias	Icono de objetivo	Target Family
add	add	material
add_child	agregar-niño	imx-icons
add_row	fila de adición	imx-icons
arrow_back	arrow_back	material
arrow_drop_down	arrow_drop_up	material
arrow_forward	flecha_adelante	material
arrow_next	chevron_right	material
arrow_prev	chevron_izquierda	material
case_sensitive	case-sensitive	imx-icons
carousel_next	flecha_adelante	material
carousel_prev	arrow_back	material
chevron_left	chevron_izquierda	material
chevron_right	chevron_right	material
reloj	access_time	material
cerrar	cerca	material
colapso	expand_less	material
confirmar	controlar	material
date_range	date_range	material
borrar	delete	material
drag_indicator	drag_indicator	material
editar	editar	material
error	error	material
expandir	expand_more	material
expand_more	expand_more	material
file_download	file_download	material
filter_all	Seleccionar-todo	imx-icons
filter_before	es-antes	imx-icons
filter_contains	Contiene	imx-icons
filter_does_not_contain	no-contiene-	imx-icons
filter_empty	está-vacío	imx-icons
filter_equal	Iguales	imx-icons
filter_false	es-falso	imx-icons
filter_greater_than	mayor que	imx-icons
filter_greater_than_or_equal	mayor o igual que	imx-icons
filter_in	está-en	imx-icons
filter_last_month	último mes	imx-icons
filter_last_year	El año pasado	imx-icons
filter_less_than	menos de	imx-icons
filter_less_than_or_equal	menor o igual	imx-icons
filter_next_month	El mes que viene	imx-icons
filter_next_year	El año que viene	imx-icons
filter_not_empty	no-vacío	imx-icons
filter_not_equal	no igual	imx-icons
filter_not_null	es-no-nulo	imx-icons
filter_null	es-nulo	imx-icons
filter_starts_with	comienza-con	imx-icons
filter_this_month	este mes	imx-icons
filter_this_year	Este año	imx-icons
filter_today	Hoy	imx-icons
filter_true	es-verdad	imx-icons
filter_yesterday	Ayer	imx-icons
first_page	primera página	material
group_work	trabajo en equipo	material
esconder	visibilidad_desactivada	material
import_export	importación y exportación	material
input_collapse	arrow_drop_up	material
input_clear	claro	material
input_expand	flecha_drop_abajo	material
jump_down	Salto hacia abajo	imx-icons
jump_up	Saltar	imx-icons
last_page	última página	material
more_vert	more_vert	material
próximo	navigate_next	material
anclar	pin a la izquierda	imx-icons
Prev	navigate_before	material
actualizar	actualizar	material
eliminar	Cancelar	material
buscar	buscar	material
seleccionado	hecho	material
mostrar	visibilidad	material
sort_asc	flecha_hacia arriba	material
sort_desc	flecha_hacia abajo	material
Funciones	Funciones	material
table_rows	table_rows	material
Hoy	calendar_today	material
tree_collapse	expand_more	material
tree_expand	chevron_right	material
unfold_less	desplegar_menos	material
unfold_more	unfold_more	material
Desanclar	desanclar a la izquierda	imx-icons
view_column	view_column	material

Para aprovechar la ventaja de cambiar los iconos internos por referencia, en lugar de crear plantillas personalizadas, puede hacer lo siguiente para reemplazar los iconos de expandir/contraer en el combo y seleccionar componentes:

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

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

Esto establecerá los iconos de expansión y colapso a lasarrow_downward ligaduras yarrow_upward respectivamente, desde lamaterial familia de fuentes para todos los componentes combo y select.

A continuación, se muestra un desglose de todos los iconos utilizados por cada componente:

Tira de acción

Icono	Descripción
add_child	Utilizado por el menú emergente.
add_row	Utilizado por el menú emergente.
more_vert	Utilizado por el menú emergente.

Calendario

Icono	Descripción
arrow_prev	Utilizado por el encabezado para navegar entre meses/años.
arrow_next	Utilizado por el encabezado para navegar entre meses/años.

Carrusel

Icono	Descripción
carousel_prev	Se utiliza para navegar entre diapositivas.
carousel_next	Se utiliza para navegar entre diapositivas.

Chip

Icono	Descripción
seleccionado	Se utiliza para indicar que se ha seleccionado una ficha.
eliminar	Se utiliza para el botón de eliminación.

Combo (incl. Combo Simple)

Icono	Descripción
case_sensitive	Se utiliza para indicar y alternar el filtrado que distingue entre mayúsculas y minúsculas.
input_clear	Se utiliza para el botón de borrar.
input_expand	Se utiliza para el botón de alternancia cuando el menú combinado está colapsado.
input_collapse	Se utiliza para el botón de alternancia cuando se expande el menú combinado.

Selector de fechas

Icono	Descripción
Hoy	Se utiliza para el botón de alternancia que activa el selector.
input_clear	Se utiliza para el botón de borrar.

Selector de intervalo de fechas

Icono	Descripción
date_range	Se utiliza para el botón de alternancia que activa el selector.

Panel de expansión

Icono	Descripción
expandir	Se utiliza para el botón de alternancia que desencadena el estado expandido.
colapso	Se utiliza para el botón de alternancia que desencadena el estado contraído.

Red

Icono	Descripción
add	Se utiliza en el menú de filtro de Excel para agregar una entrada de filtro.
arrow_back	Se utiliza en varios elementos de la interfaz de usuario para mover una columna hacia atrás.
arrow_drop_down	Se usa en varios botones para indicar menús que se pueden alternar.
arrow_forward	Se utiliza en varios elementos de la interfaz de usuario para mover una columna hacia adelante.
Cancelar	Se utiliza en varios elementos de la interfaz de usuario para cancelar operaciones.
chevron_right	Se utiliza para indicar menús expandibles, como en el filtrado de estilo de Excel.
cerrar	Se utiliza para cerrar un menú expandido.
confirmar	Se utiliza para confirmar una operación.
drag_indicator	Se utiliza para mostrar un controlador para indicar que se puede arrastrar un elemento.
error	Se utiliza en celdas editables para indicar la entrada de datos errónea.
expand_more	Utilizado por el menú de filtrado de Excel para indicar la adición de más filtros.
file_download	Utilizado por el exportador de filtros de Excel.
filter_*	Se utiliza para varios operandos de filtrado.
group_work	Utilizado por el área de colocación agrupar por.
esconder	Lo usan varios elementos de la interfaz de usuario para ocultar columnas.
import_export	Utilizado por el selector de datos de pivote para mover.
input_clear	Utilizado por los campos de entrada para borrar los datos de entrada.
próximo	Utilizado por el menú de filas de filtrado para navegar entre fichas.
anclar	Lo usan varios elementos de la interfaz de usuario para el anclaje de columnas.
Prev	Utilizado por el menú de filas de filtrado para navegar entre fichas.
eliminar	Utilizado por varios elementos de la interfaz de usuario como indicador de eliminación.
actualizar	Utilizado por el menú de la fila de filtrado para volver a cargar los filtros.
seleccionado	Utilizado por varios elementos de la interfaz de usuario para indicar la selección activa.
mostrar	Lo usan varios elementos de la interfaz de usuario para mostrar columnas.
sort_asc	Lo utilizan varios elementos de la interfaz de usuario para indicar la dirección de clasificación.
sort_desc	Lo utilizan varios elementos de la interfaz de usuario para indicar la dirección de clasificación.
Funciones	Utilizado por la cuadrícula pivotante y los selectores de datos.
table_rows	Utilizado por el selector de datos de la cuadrícula dinámica.
tree_collapse	Utilizado por la estructura en forma de árbol para mostrar menos detalles.
tree_expand	Utilizado por la estructura en forma de árbol para mostrar más detalles.
Desanclar	Lo usan varios elementos de la interfaz de usuario para el anclaje de columnas.
unfold_less	Utilizado por la cuadrícula jerárquica para contraer todas las filas.
unfold_more	Utilizado por la cuadrícula jerárquica para expandir todas las filas.
view_column	Utilizado por el selector de datos dinámicos.

Grupo de entrada

Icono	Descripción
input_clear	Se utiliza para el botón de borrar.

Paginador

Icono	Descripción
first_page	Utilizado por el botón utilizado para navegar a la primera página.
last_page	Utilizado por el botón utilizado para navegar a la última página.
Prev	Utilizado por el botón utilizado para navegar a la página anterior.
próximo	Utilizado por el botón utilizado para navegar a la página siguiente.

Consultor de construcción

Icono	Descripción
add	Utilizado por el botón para agregar nuevas entradas de filtro.
cerrar	Utilizado por el botón que cierra el menú contextual.
editar	Utilizado por el botón para editar entradas de filtro.
confirmar	Utilizado por el botón para confirmar la adición de nuevas entradas de filtro.
Desagrupar	Utilizado por el botón para desagrupar las entradas de filtro.
borrar	Utilizado por el botón para eliminar entradas de filtro.
filter_*	Se utiliza para varios operandos de filtrado.

Seleccionar

Icono	Descripción
input_expand	Se utiliza para el botón de alternancia cuando el menú de selección está contraído.
input_collapse	Se utiliza para el botón de alternancia cuando se expande el menú de selección.

Pestañas

Icono	Descripción
Prev	Utilizado por el botón utilizado para navegar a la pestaña anterior.
próximo	Utilizado por el botón utilizado para navegar a la siguiente pestaña.

Selector de tiempo

Icono	Descripción
reloj	Se utiliza para el botón de alternancia que activa el selector.

Árbol

Icono	Descripción
tree_expand	Se utiliza para el botón de alternancia que activa el selector.
tree_collapse	Se utiliza para el botón de alternancia que activa el selector.

API

Aquí hay un resumen rápido de todos los métodos disponibles a través del servicio de iconos de Ignite UI for Angular.

Add Family

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

Icon References

Establecer SOLO si NO está ya presente el mapa de iconos:

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

Establezca una referencia de icono en el mapa de iconos (anulado si ya está presente):

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

Obtener una referencia de icono

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

SVG Icons

De URI:

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

De la cadena:

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

API References

IgxIconService

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.