@smui/icon-button

Svelte Material UI - Icon Button

Icon buttons are symbolic buttons or toggles.

Installation

npm install --save-dev @smui/icon-button

Examples and Usage Information

https://sveltematerialui.com/demo/icon-button

Exports

(default)

An icon button.

Options / Defaults

• component: href == null ? Button : A - A component to use as the root element.
• use: [] - An array of Svelte actions and/or arrays of an action and its options.
• class: '' - A CSS class string.
• ripple: true - Whether to implement a ripple for when the component is interacted with.
• color: undefined - A color passed to the ripple action.
• toggle: false - Whether the button is a toggle. A toggle button should have two Icon children, one with the on prop.
• pressed: false - Whether the toggle button is pressed.
• ariaLabelOn: undefined - The ARIA label to use when the toggle is on.
• ariaLabelOff: undefined - The ARIA label to use when the toggle is off.
• href: undefined - If the href property is set, the button will use an anchor element, instead of a button element.
• action: undefined - Used in the context of a data table pagination or a dialog. This sets the button's action. ('first-page', 'prev-page', 'next-page', or 'last-page' for data table pagination, 'close' or any string for dialog)

Events

• MDCIconButtonToggle:change

Icon

A graphic icon.

See the common icon readme.

More Information

See Icon Button in MDC-Web for information about the upstream library's architecture.

Changelog

8.0.3 (2025-08-13)

Bug Fixes

• update html attribute types to account for svelte attachments (7fa516d), closes #695