InputIcon

<ui5-input-icon> | Since 2.25.0

The ui5-input-icon component represents an interactive icon that can be placed inside an ui5-input component. Unlike the standard ui5-icon, this component provides button-like behavior with hover, focus, and active states, matching the visual style of the input's built-in clear icon.

Usage

Use ui5-input-icon for interactive icons that users can click (e.g., search, voice input, camera). For decorative icons, use the standard ui5-icon component instead.

ES6 Module Import

import "@ui5/webcomponents/dist/InputIcon.js";

Properties

accessibleName

Description	Defines the accessible name of the icon. Note: This property is used for accessibility purposes and will be announced by screen readers. When set, it is also rendered as a native title tooltip.
Type	string | undefined
Default	undefined

name

Description	Defines the icon name to be displayed. Note: Make sure you import the desired icon before using it.
Type	string | undefined
Default	undefined

Slots

No slots available for this component.

Events

click

Description	Fired when the ui5-input-icon is activated either with a click/tap or by using the Enter or Space key.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.