Descripción general del componente Icono Angular

El componente Ignite UI for Angular Icon unifica las familias de iconos/fuentes para que los desarrolladores puedan utilizarlas indistintamente y añadir iconos de material al marcado.

Angular Icon Example

Getting Started with Ignite UI for Angular Icon

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

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxIconModule en tu archivo 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 puedes importarlosIgxIconComponent como una dependencia independiente.

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

Ahora que tienes importado el módulo o componente de Ignite UI for Angular Icon, puedes empezar a usar eligx-icon componente.

Using the Angular Icon

Icon Color

Usastyle.color la propiedad CSS para cambiar su color por defecto:

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

Inactive Icon

Si quieres desactivar un icono, puedes usar laactive propiedad:

<igx-icon [active]="false">volume_off</igx-icon>

Content Projection

Puedes configurar íconos con proyección de contenido:

<igx-icon>bluetooth</igx-icon>

Icon Size

Puedes personalizar los iconos usando CSS. Para cambiar el tamaño de un icono utiliza la--size variable CSS:

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

SVG Icons

También puedes usar una imagen SVG como icono. Primero, inyecta laIgxIconService dependencia. En este ejemplo lo inyectaremos en el constructor de un componente, pero puedes usarlo donde sea necesario en tu código.

Usa eladdSvgIcon método para importar el archivo SVG en la caché. Cuando el SVG está en caché, puede usarse 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; La familia también puede especificarse. Después de eso, puedes usar los archivos SVG en el marcado HTML. Alternativamente, puedes usar eladdSvgIconFromText método para importar un archivo SVG, proporcionando el contenido de 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.

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

Además, los usuarios pueden aprovechar los últimos iconos de Material y sus variaciones de diseño incluidas en los recién creadosMaterial Symbols Library. Para empezar a usar Material Symbols, primero tienes que añadir la biblioteca a tu aplicación:

<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"/>

Luego necesitamos inyectar laIgxIconService dependencia y utilizar susetFamily método para que los Símbolos Materiales puedan trabajar conigx-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' });
}

Ahora estamos listos para agregar el ícono deseado a nuestro marcado y personalizarlo usando estilos de fuente ajustables:

<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 más sobre los estilos de Material Symbols, por favor visita su páginaofficial documentation de

Server-side Rendering Note

Note

En caso de que hayas implementado lógica de renderizado del lado del servidor en tu aplicación usando Angular Universal y hayas utilizado losIgxIconService iconos para registrar, esto puede causar la siguiente excepción:

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

Para evitar esto, ejecuta los pasos listados:

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

En la parte superior de su archivo `server.ts`, agregue:

(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

Estilismo

Para empezar a estilizar los iconos, necesitamos importar elindex archivo, donde están todas las funciones del tema y los componentes mezclados:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende yicon-theme acepta los parámetros necesarios para personalizar el icono según se desee.

$custom-icon-theme: icon-theme(
  $color: #1481b8,
  $disabled-color: #494949,
);

El último paso es pasar el tema de ícono personalizado en nuestra aplicación:

@include css-vars($custom-icon-theme);

Demo

SVG Limitations

Es importante señalar que al usar iconos SVG personalizados, soloicon-theme pueden aplicar y sobrescribir colores en el<svg> propio elemento. Si el SVG contiene elementos hijos como<path>,<rect>,<circle>,<g>, etc., con valores de color codificados de forma fija, esos colores no pueden ser anulados por el tema.

Por ejemplo:

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

En este caso, el icono siempre usará el#050d42 color definido en el<path>, independientemente del color proporcionado por el tema.

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

Aquí, el color de relleno se aplica al<svg> elemento, por lo que puede ser anulado con un color personalizado proporcionado a través deicon-theme.

Recomendamos no usar colores codificados en los elementos hijos de SVG para que el icono pueda estilizarse completamente usando elicon-theme. Sin embargo, si aún quieres aplicar colores codificados a elementos hijos, también puedes usar las variables de color 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

Puedes usar la--size variable, dirigiéndote directamente a:igx-icon

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

O puedes usar la variable universal--igx-icon-size para dirigirte a todas las instancias:

<div class="my-app">
  <igx-icon></igx-icon>
</div>

.my-app {
  --igx-icon-size: 50px;
}

También puedes usar 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:

igx-icon {
  --ig-size: var(--ig-size-medium);
}

Obtén más información al respecto en el artículo Talla.

Styling with Tailwind

Puedes decorarlosicon usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

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

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-icon,dark-icon.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el icono-tema. La sintaxis es la siguiente:

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

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final tu icono debería verse así:

API References

Additional Resources

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

Descripción general del componente Icono Angular

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

Estilismo

Demo

SVG Limitations

Custom sizing

Styling with Tailwind

Note

API References

Additional Resources

Tematización