Blazor Icon Button Overview

    The Ignite UI for Blazor Icon Button component allows developers to use registered icons as buttons in their application. It carries all features of the icon component but adds features from the button component as well.

    Blazor Icon Button Example

    Usage

    Before using the IgbIconButton, you need to register it as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbIconButtonModule));

    You will also need to link an additional CSS file to apply the styling to the IgbIconButton component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbIconButton IconName="thumb-up" Collection="material" />

    Examples

    Variant

    Similar to the regular button components, the icon button supports several variants - flat (default), contained, and outlined; To change the icon button type set the variant attribute of the icon button.

    <IgbIconButton IconName="search" Variant="@IconButtonVariant.Contained" Collection="material" />

    Size

    The size of the button can be changed by utilizing the --ig-size CSS variable to any of the three supported sizes: --ig-size-small, --ig-size-medium, --ig-size-large(default).

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

    <IgbIconButton IconName="thumb-up" Collection="material" Size="@SizableComponentSize.Medium" />

    Type

    The icon button component will change its internal structure from <button> to an <a> type element when the href attribute is set. In that case the icon button can be thought of as a regular link. Setting the href attribute will allow you to also set the rel, target, and download attributes of the icon button.

    <IgbIconButton IconName="thumb-up" Collection="material" Href="https://duckduckgo.com" Target="_blank" />

    Mirrored

    Some icons need to look a little different when used in Right-to-Left(RTL) mode. For that reason we provide a mirrored attribute that, when set, flips the icon button horizontally.

    <IgbIconButton IconName="thumb-up" Collection="material" Mirrored="true" />

    Styling

    The IgbIconButton component exposes two CSS parts - base and icon that allow you to style the wrapping element (<button> or <a>) and the wrapped <igc-icon> element.

    igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}

    API References

    Additional Resources