Descripción general del componente de icono Angular
El componente Ignite UI for Angular Icon unifica familias de íconos/fuentes para que los desarrolladores puedan usarlos indistintamente y agregar íconos de materiales al marcado.
Para comenzar con el componente Ignite UI for Angular Icon, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxIconModule en su archivo app.module.ts.
Puedes configurar íconos con proyección de contenido:
<igx-icon>bluetooth</igx-icon>html
Icon Size
Puedes personalizar los iconos usando CSS. Para cambiar el tamaño de un icono, utilice la variable CSS--size:
.custom-size {
--size: 56px;
}
scss
SVG Icons
También puedes utilizar una imagen SVG como icono. Primero, inyecte la dependencia IgxIconService. En este ejemplo lo inyectaremos en el constructor de un componente, pero puedes usarlo donde sea necesario en tu código.
Utilice el método addSvgIcon para importar el archivo SVG en la caché. Cuando el SVG se almacena en caché, se puede utilizar en cualquier parte de la aplicación. El nombre del icono y la ruta URL del archivo son los parámetros obligatorios del método; También se puede especificar la familia. Después de eso, puedes usar los archivos SVG en el marcado HTML. Alternativamente, puede usar el método addSvgIconFromText para importar un archivo SVG, proporcionando el contenido del texto SVG en lugar de la URL del archivo.
Tenga en cuenta que si hay dos iconos con el mismo nombre y la misma familia, el icono SVG se mostrará con prioridad.
Es mejor no proporcionar el ancho y el alto de la imagen en el archivo SVG.
Es posible que necesite scripts de polyfill adicionales ("polyfills") para Internet Explorer.
Además, los usuarios pueden aprovechar los últimos íconos de materiales y sus variaciones de diseño incluidos en la recién creada Material Symbols Library. Para comenzar a usar Material Symbols, primero debes agregar la biblioteca a tu aplicación:
Luego necesitamos inyectar la IgxIconService dependencia y hacer uso de su setFamily método para que Material Symbols pueda trabajar con igx-icon:
constructor(private iconService: IgxIconService) { }
publicngOnInit() {
// registers a 'material-symbols-outlined' class to be applied to all igx-icons with 'material-symbols' font-familythis.iconService.setFamily('material-symbols', { className: 'material-symbols-outlined', type: 'liga' });
}
ts
Ahora estamos listos para agregar el ícono deseado a nuestro marcado y personalizarlo usando estilos de fuente ajustables:
Para obtener más información sobre los estilos de símbolos de materiales, visite su official documentation.
Server-side Rendering Note
En caso de que haya implementado la lógica de representación del lado del servidor en su aplicación mediante Angular Universal y haya utilizado los IgxIconService iconos para registrar, esto puede provocar la siguiente excepción:
> XMLHttpRequest is not defined. Could not fetch SVG from url. >
Para evitar esto, ejecute los pasos enumerados:
Instale `xmlhttprequest`:
npm i xmlhttprequest
cmd
En la parte superior de su archivo `server.ts`, agregue:
Para comenzar a diseñar los íconos, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el icon-theme y acepta los parámetros necesarios para personalizar el ícono como se desee.
También puede utilizar uno de los tamaños predefinidos, asignándolo a la--ig-size variable. Los valores disponibles para--ig-size son--ig-size-small,,--ig-size-medium y--ig-size-large: