Descripción general del botón de icono Angular

    La directiva Ignite UI for Angular Icon Button está pensada para convertir cualquier icono en un botón completamente funcional. Viene igxIconButton en tres tipos: plano, delineado y contenido, que es el predeterminado.

    Angular Icon Button Example

    Getting Started with Ignite UI for Angular Icon Button

    Para comenzar con la directiva Ignite UI for Angular Icon Button, 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 el IgxIconButtonDirective como una dependencia independiente:

    // home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
        <button igxIconButton="outlined">
            <igx-icon>home</igx-icon>
        </button>`,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxIconButtonDirective]
})
export class HomeComponent {}

    Ahora que tiene importada la directiva Ignite UI for Angular Icon Button, puede comenzar a usar la igxIconButton directiva en los elementos.

    Angular Icon Button Types

    Flat Icon Button

    Utilice la directiva para añadir un simple botón de icono plano en la igxIconButton plantilla de componente:

    <button igxIconButton="flat">
    <igx-icon>edit</igx-icon>
</button>

    Contained Icon Button

    Todo lo que tienes que hacer para crear un botón de icono contenido es cambiar el valor de la igxIconButton propiedad. Tenga en cuenta que si no elige un tipo, de forma predeterminada también se establecerá en contained.

    <button igxIconButton>
    <igx-icon>favorite</igx-icon>
</button>

    Outlined Icon Button

    Analógicamente podemos pasar al tipo delineado:

    <button igxIconButton="outlined">
    <igx-icon>more_vert</igx-icon>
</button>

    Examples

    Disabled Icon Button

    Si desea deshabilitar un botón de icono, puede usar la disabled propiedad. En este ejemplo, también demostramos cómo usar iconos de diferentes familias con la igxIconButton directiva:

    <button igxIconButton="flat" disabled>
    <igx-icon family="fa" name="fa-home"></igx-icon>
</button>

    SVG Icons

    Además de los iconos de material, la directiva también admite el igxIconButton uso de imágenes SVG como iconos. Para hacerlo, primero debemos inyectar la IgxIconService dependencia y luego usar el método para importar el addSvgIcon archivo SVG en caché. Para obtener más información, puede leer la sección SVG en el tema del icono.

    constructor(private _iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icon
    this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
}

    <button igxIconButton>
    <igx-icon family="weather-icons" name="rain"></igx-icon>
</button>

    Tamaño

    Los usuarios pueden elegir uno de los tres tamaños predefinidos igxIconButton mediante la--ig-size propiedad CSS personalizada. De forma predeterminada, el tamaño del componente se establece en medio.

    Como puedes ver en el ejemplo anterior, también podemos usar la igxIconButton directiva para convertir elementos como span y div en botones de iconos con estilo Ignite UI for Angular.

    Icon Button Styling

    Siguiendo el enfoque más simple, usamos variables CSS para personalizar la apariencia del botón del icono:

    [igxIconButton="contained"] {
  --background: #011627;
  --foreground: #fefefe;
  --hover-foreground: #011627dc;
  --hover-background: #ecaa53;
  --focus-foreground: #011627dc;
  --focus-background: #ecaa53;
  --focus-border-color: #0116276c;
  --active-foreground: #011627dc;
  --active-background: #ecaa53;
}

    Echa un vistazo a la icon-button-theme sección para obtener una lista completa de los parámetros disponibles para diseñar cualquier tipo de botón de icono.

    API References

    Additional Resources

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