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

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (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.