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 - color - colspan - 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

com.vaadin.flow.component.ClickEvent is sent when the user clicks on the icon.

Elements

tooltip

See Also

See Vaadin Docs for more information.