Images and Icons

Images and icons are the basic custom visual elements to add visual content, guides, and style. You can display images using the Image component. Many web components allow displaying an icon along a title or inside the component.

The Image Component

The Image component allows embedding images. It is a wrapper over the HTML <img> element. You can display either static images or ones generated on the fly.

Static Resources

A servlet container can serve images as static resources. This is more efficient than streaming them through the application, as described later. You can also serve static resources from a frontend server.

Image image = new Image("images/myimage.png", "My Alt Image");
add(image);

The second parameter to the constructor is alternative text, which is displayed if the image can not be displayed for some reason. It is also used in assistive technologies.

The location of static image resources in the project depends on the deployment method:

Web Archive (WAR) packaging

Under /src/main/webapp, such as /src/main/wepapp/images/myimage.png.

JAR packaging (Spring Boot applications)

Under /src/main/resources/META-INF/resources, such as /src/main/resources/META-INF/resources/images/myimage.png.

The access URL of the image resource depends on how the application is deployed. If the resources are deployed under the application root URL, you could access the example file with images/myimage.png, as was done in the Java example above. Embedding can further complicate the access URL.

Class Resources

You can use the StreamResource to load images from the Java class path. In this case, the images need to be under src/main/resources in the Java compilation path. The path for getResourceAsStream() is relative to that path. Notice to give the leading /.

Open in a
new tab
StreamResource imageResource = new StreamResource("myimage.png",
    () -> getClass().getResourceAsStream("/images/myimage.png"));

Image image = new Image(imageResource, "My Streamed Image");
add(image);

Icons

Icons are small graphical symbols for various functions of an application and types of data.

Vaadin Design System includes two sets of stock icons:

Lumo icons

A basic set of icons specifically designed for the default Lumo theme.

new Icon("lumo", "<identifier>")
Vaadin icons

A more general set of 600+ icons designed for web applications.

new Icon("vaadin", "<identifier>")

You can use icons like any components:

Open in a
new tab
Icon icon = new Icon("vaadin", "moon");
add(icon);

Most components allow placing icons beside the title or inside the component, as a prefix, a suffix, or a helper component. The placement options depend on the component.

Open in a
new tab
TextField field = new TextField("Street Address");
field.setPrefixComponent(new Icon("vaadin", "map-marker"));
field.setSuffixComponent(new Icon("vaadin", "building"));

// Wrap the icon inside a composition
HorizontalLayout helper = new HorizontalLayout();
helper.add(new Icon("vaadin", "info-circle-o"));
helper.add(new Label("Here be help"));
field.setHelperComponent(helper);

add(field);

Notice that you can only use a helper component (such as an icon) or text, but not both. If you need both, you can put them inside a compositing component, such as a HorizontalLayout, as in the example above.