Icons | Vaadin components

Docs
1

This topic is the discussion thread for the Vaadin documentation page Icons | Vaadin components.

Questions, feedback, and comments are welcome here.

2

Sample on how to use Vaadin Icons as fonts:

Download the Vaadin Icons font file from Github as mentioned in the tab "Default Icons" and place it inside your theme folder

Declare a font-face and a css class in your global stylesheet. The path to the downloaded .woff file is relative from the stylesheet position, e.g. when you place it beside the stylesheet, it will look like this

@font-face {
    font-family: 'Vaadin Icons';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("Vaadin-Icons.woff") format("woff2");
}

.vaadin-icon {

font-family: ‘Vaadin Icons’;

}


Then simply asign the css class to a span and set the icon name as text. You can also use the VaadinIcon enums as a base using e.g. VaadinIcon.ABACUS.create().getIcon().

Span span = new Span();

span.addClassNames(“vaadin-icon”);

span.setText(“abacus”);

add(span);


// span.setText(VaadinIcon.ABACUS.create().getIcon());

3

Remember to add `aria-hidden="true"` on the span if you don't want screen readers announcing the icon name. In some cases that might be desirable, but I think in most cases you want to avoid it.

Adding `role="img"` would also be a good addition.

4

So now i need everytime open streamResource for each view when i want to use Svg icon? How is it better option than just create iconset recommended from prev versions of Vaadin?

5

You can also place the icons in the frontend/themes folder, and reference them from there, without a StreamResource. For example, if you have an icon in /src/main/frontend/themes/my-theme/icons/my-icon.svg, you can use that with new SvgIcon("/themes/my-theme/icons/my-icon.svg")

6

Why can't we set the width and the height of the icons independently?

For normal icons this is fine, but what if i add a custom icon set that has very elongated icons? E.g like this one?

7
I think it should work by setting width and height separately instead of using the size property, although the Flow class doesn't have setters for those so you need to set them via getStyles()
The Image class could also be an option