icon

LIVE DEMO

icon displays an image sourced from an icon set.

  • XML element: icon

  • Java class: Icon

Basics

Use icon to add a standalone icon anywhere on the view.

<icon icon="CAR"/>
<icon icon="AIRPLANE"/>
<icon icon="TRAIN"/>
icon basic

Icon Sets

There are two built-in icon sets containing frequently used icons: Vaadin and Lumo. To differentiate between sets, add its prefix before the icon name. If no prefix is present, the Vaadin set is used.

<icon icon="USER"/>
<icon icon="vaadin:user"/>
<icon icon="lumo:user"/>
icon sets

Components with Icons

Icon can be a part of a component. See an example of using an icon with the button component.

Attributes

id - alignSelf - classNames - clickShortcut - color - colspan - css - icon - size - visible

color

Sets the color for icon.

icon

Specifies the icon to be displayed.

size

Specifies the size of the icon.

Handlers

AttachEvent - ClickEvent - DetachEvent

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

ClickEvent

The com.vaadin.flow.component.ClickEvent is fired when the component is clicked. This handler must specify one of the following three subjects to detect the number of clicks related to the event.

  • click – fires the event whenever the component is clicked.

  • singleClick – fires the event after a timeout to ensure it is not a double click.

  • doubleClick – fires the event when the component is double-clicked.

Elements

tooltip

See Also

See Vaadin Docs for more information.