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 importar IgxIconModule en su archivo app.module.ts.

    // app.module.ts

import { IgxIconModule } from 'igniteui-angular';
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxIconModule,
        ...
    ]
})
export class AppModule {}

    Alternativamente, a partir de 16.0.0 puede importar IgxIconComponent como una dependencia independiente.

    // home.component.ts

import { IgxIconComponent } from 'igniteui-angular';
// 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 ha importado el módulo o componente Ignite UI for Angular Icon, puede empezar a utilizar el igx-icon componente.

    Using the Angular Icon

    Icon Color

    Utilice la propiedad CSS style.color para cambiar su color predeterminado:

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

    Inactive Icon

    Si desea desactivar un icono, puede utilizar la propiedad active:

    <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, utilice la variable CSS--size:

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

    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.
    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 í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:

    <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 la IgxIconService dependencia y hacer uso de su setFamily método para que Material Symbols pueda trabajar con igx-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 obtener más información sobre los estilos de símbolos de materiales, visite su official documentation.

    Server-side Rendering Note

    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:

    1. Instale `xmlhttprequest`:
      npm i xmlhttprequest
    2. En la parte superior de su archivo `server.ts`, agregue:
      (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

    Estilismo

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

    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.

    $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 tener en cuenta que cuando se utilizan iconos SVG personalizados, solo icon-theme se pueden aplicar y sobrescribir colores en el <svg> propio elemento. Si el SVG contiene elementos secundarios como <path>, <rect>,, <circle>, <g> etc., con valores de color codificados de forma rígida, esos colores no pueden ser anulados por el tema.

    Por ejemplo:

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

    En este caso, el icono siempre utilizará 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 elemento, por lo que se puede anular con el <svg> color personalizado proporcionado a través de icon-theme.

    Se recomienda no usar colores codificados de forma rígida en los elementos secundarios SVG para que el icono se pueda diseñar completamente con el icon-theme. Sin embargo, si aún desea aplicar colores codificados de forma rígida a los elementos secundarios, también puede 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

    Puede utilizar la variable, dirigiéndose directamente a la--size​ ​igx-icon variable :

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

    O bien, puede utilizar la variable universal--igx-icon-size para dirigirse a todas las instancias:

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

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

    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:

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

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

    API References

    Additional Resources

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