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.
Element
igc-icon-button
Slots
default — Optional label rendered alongside the icon, useful for accessibility or augmented layouts.
CSS Parts
base — The wrapping element of the icon button.
icon — The icon element of the icon button.

Constructors

Section titled "Constructors"

IgcIconButtonComponent 

new IgcIconButtonComponent(): IgcIconButtonComponent

Defined in src/components/button/icon-button.ts:79

Returns IgcIconButtonComponent

Properties

Section titled "Properties"

Optional collection

Section titled "collection"

The collection the icon belongs to.

 
collection: string

Defined in src/components/button/icon-button.ts:58

Optional command

Section titled "command"

Inherited from: IgcButtonBaseComponent

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: string

Defined in src/components/button/button-base.ts:136

Optional download

Section titled "download"

Inherited from: IgcButtonBaseComponent

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: string

Defined in src/components/button/button-base.ts:90

Optional href

Section titled "href"

Inherited from: IgcButtonBaseComponent

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: string

Defined in src/components/button/button-base.ts:81

mirrored

Section titled "mirrored"

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

 
mirrored: boolean = false

Defined in src/components/button/icon-button.ts:66

Optional name

Section titled "name"

The name of the icon to display.

 
name: string

Defined in src/components/button/icon-button.ts:51

Optional rel

Section titled "rel"

Inherited from: IgcButtonBaseComponent

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: string

Defined in src/components/button/button-base.ts:111

Optional target

Section titled "target"

Inherited from: IgcButtonBaseComponent

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: "_blank" | "_parent" | "_self" | "_top"

Defined in src/components/button/button-base.ts:101

type

Section titled "type"

Inherited from: IgcButtonBaseComponent

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: "reset" | "submit" | "button" = 'button'

Defined in src/components/button/button-base.ts:72

variant

Section titled "variant"

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: IconButtonVariant = 'contained'

Defined in src/components/button/icon-button.ts:77

formAssociated

Section titled "formAssociated"

Inherited from: IgcButtonBaseComponent 

formAssociated: true = true

Defined in src/components/button/button-base.ts:38

tagName

Section titled "tagName" 
tagName: "igc-icon-button" = 'igc-icon-button'

Defined in src/components/button/icon-button.ts:37

Accessors

Section titled "Accessors"

commandfor

Section titled "commandfor"

Inherited from: IgcButtonBaseComponent 

get commandfor(): string | null

Defined in src/components/button/button-base.ts:155

Returns string | null

The ID of the target element for the invoker command. Part of the Invoker Commands API.

 
set commandfor(value: string | null): void

Defined in src/components/button/button-base.ts:144

Parameters

  • value: string | null

Returns void

commandForElement

Section titled "commandForElement"

Inherited from: IgcButtonBaseComponent

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

 
get commandForElement(): Element | null

Defined in src/components/button/button-base.ts:163

Returns Element | null 

set commandForElement(value: Element | null): void

Defined in src/components/button/button-base.ts:168

Parameters

  • value: Element | null

Returns void

disabled

Section titled "disabled"

Inherited from: IgcButtonBaseComponent 

get disabled(): boolean

Defined in src/components/button/button-base.ts:125

Returns boolean

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

 
set disabled(value: boolean): void

Defined in src/components/button/button-base.ts:120

Parameters

  • value: boolean

Returns void

form

Section titled "form"

Inherited from: IgcButtonBaseComponent

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

 
get form(): HTMLFormElement | null

Defined in src/components/button/button-base.ts:182

Returns HTMLFormElement | null

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: IgcButtonBaseComponent 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

click

Section titled "click"

Inherited from: IgcButtonBaseComponent

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

 
click(): void

Defined in src/components/button/button-base.ts:229

Returns void

emitEvent

Section titled "emitEvent"

Inherited from: IgcButtonBaseComponent 

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

removeEventListener

Section titled "removeEventListener"

Inherited from: IgcButtonBaseComponent 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

register

Section titled "register" 
register(): void

Defined in src/components/button/icon-button.ts:41

Returns void