icon

icon displays an image sourced from an icon set. There are two built-in icon sets: Vaadin and Lumo.

XML Element

icon

Java Class

Icon

Basics

LIVE DEMO

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

XML
<layout>
    <hbox id="content" padding="false" alignItems="CENTER" wrap="true">
        <button icon="CHECK" themeNames="icon"/>
        <icon icon="vaadin:smiley-o"/>
        <textField id="field" placeholder="Field"/>
    </hbox>
</layout>
Java
@ViewComponent
protected TypedTextField<String> field;
@ViewComponent
protected HorizontalLayout content;

@Subscribe
protected void onInit(InitEvent event) {
    field.setSuffixComponent(VaadinIcon.QUESTION_CIRCLE.create());

    Icon icon = ComponentUtils.parseIcon("lumo:user");
    content.add(icon);
}

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"/>

Components with Icons

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

Attributes

The following attributes are specific to icon:

Name Description Default

color

Sets the color for icon.

—

icon

Specifies the icon to be displayed.

—

size

Specifies the size of the icon.

—

The following shared attributes are supported by icon:

id - alignSelf - classNames - clickShortcut - colspan - css - visible

Handlers

The following handlers are specific to icon:

Name Description

ClickEvent

The com.vaadin.flow.component.ClickEvent is fired when the component is clicked.

The following shared handlers are supported by icon:

AttachEvent - DetachEvent

Elements

An icon can include tooltip as its nested elements.

See Also