Icon Button

A web component for icon-only buttons in regular or dense size, built on Material Web.

A round button showing only an icon, sized by its font-size and colored by the inherited color.

Installation

npm install @3mo/icon-button

import '@3mo/icon-button'

Usage

<mo-icon-button icon='verified'></mo-icon-button>

Examples

• Color — The icon, its ripple and its focus ring take the inherited color.
• Sizes — The button scales with its font-size, 20px by default.
• Dense — dense halves the padding around the icon, for tight spots such as a field or a table cell.
• Disabled — A disabled button fades and ignores presses.
• Icon Slot — The icon slot takes any content in place of the Material icon.
• Parts — The button, ripple and focus-ring parts can be restyled or hidden from outside.

Accessibility

It does not pass aria-label on to its button yet, so its name is the name of its icon, such as "more_vert".

API

mo-icon-button

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | icon | icon | MaterialIcon | | The icon to display. | | disabled | disabled | boolean | false | Disables the icon-button. | | dense | dense | boolean | false | Reduces the size of the icon-button. |

Slots

| Name | Description | | --- | --- | | icon | Content in place of the icon. |

CSS parts

| Name | Description | | --- | --- | | button | The native button element wrapping the icon-button. | | ripple | The ripple effect of the icon-button. | | focus-ring | The focus ring of the icon-button. |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH