Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcIconButtonComponent

A button that displays a single icon, designed for compact, icon-only interactions such as toolbar actions, floating action buttons, or inline controls.

The icon is sourced from the icon registry via the name and collection attributes. Like the normal button, it can render as an anchor element when href is set and is fully form-associated.

igc-icon-button

  • Optional label rendered alongside the icon, useful for accessibility or augmented layouts.

base - The wrapping element of the icon button.

icon - The icon element of the icon button.

Hierarchy

Hierarchy

  • IgcButtonBaseComponent
    • IgcIconButtonComponent

Properties

Accessors

Methods

Properties

collection?: string

The collection the icon belongs to.

collection

command?: string

The command to invoke on the target element specified by commandfor. Part of the Invoker Commands API. Custom commands must start with two dashes (e.g. '--my-command').

command

download?: string

Prompts the browser to download the linked resource rather than navigating to it. The optional value is used as the suggested file name. Only effective when href is set.

download

href?: string

The URL the button points to. When set, the component renders as an <a> element instead of a <button>, enabling navigation on click. Use together with target, download, and rel for full anchor semantics.

href

mirrored: boolean = false

Determines whether the icon should be mirrored in right-to-left contexts.

mirrored

false
name?: string

The name of the icon to display.

name

rel?: string

The relationship between the current document and the linked URL. Accepts a space-separated list of link types (e.g. 'noopener noreferrer'). Only effective when href is set. When target="_blank" is used, setting rel="noopener noreferrer" is strongly recommended for security.

rel

target?: "_blank" | "_parent" | "_self" | "_top"

Where to open the linked document. Only effective when href is set.

  • '_self' – current browsing context (default browser behavior).
  • '_blank' – new tab or window.
  • '_parent' – parent browsing context; falls back to _self if none.
  • '_top' – top-level browsing context; falls back to _self if none.

target

type: "reset" | "submit" | "button" = 'button'

The type of the button, which determines its behavior and semantics.

  • 'button' – no default action; useful for custom JavaScript handlers.
  • 'submit' – submits the associated form when clicked.
  • 'reset' – resets the associated form fields to their initial values.

Ignored when the button is rendered as a link (i.e. href is set).

type

'button'
variant: IconButtonVariant = 'contained'

The variant of the button which determines its visual appearance.

  • contained – filled background; highest visual emphasis (default).
  • outlined – transparent background with a visible border.
  • flat – no background or border; lowest visual emphasis.

variant

'contained'

Accessors

  • get commandForElement(): Element | null

    The target element for the invoker command. Resolved from the commandfor ID.

    Returns Element | null

  • set disabled(value: boolean): void

    When set, the button will be disabled and non-interactive.

    disabled

    false

    Parameters

    • value: boolean

    Returns void

  • get form(): HTMLFormElement | null

    The <form> element the button is associated with. Resolved through the standard form-association mechanism — either the closest ancestor <form> or the form referenced by the button's form attribute. Returns null when no form is associated. Relevant only when type is 'submit' or 'reset'.

    Returns HTMLFormElement | null

Methods

  • Simulates a mouse click on the button, triggering its click handler and any associated form action.

    Returns void