How to include own icon collection in Vaadin flow?

Question

How do you include your own icons in Vaadin Flow? Do you make an HTML file like this one from Vaadin Icons and include it via

@HtmlImport("frontend://path/to/your/icons.html")

I did not find any documentation so far. So I guess this is one possibility?

Yearbook

Yes, that’s the way. You can use the polyicon.com website to easily create that file. For the built-in component icons (like the date picker calendar icon) you need to use regular CSS – they use font icons by default. – Electrograph

@Electrograph Thanks, especially for the link. – Yearbook

The above link is dead. Would you update that? – Mislead

@Mislead it's still working for me. – Yearbook

Answer 1

Here is an example of adding some IcoMoon icons to a Vaadin Flow App;

1. Using the notes in https://icomoon.io/docs.html under the section 'Generating Icons in SVG & More', I generated the Polymer compatible icon set in iron-iconset-svg format.

   • Visit https://icomoon.io/app/ and select the icons (you can add icons from different libraries),
   • click on 'Generate SVG & More',
   • click on 'Preferences' and select Polymer as the target format and download,

2. Extract the zip file, and open the polymer folder. It contains the *-svg.html file which is the 'iron-iconset-svg' format file that @Jouni is talking about in the above note. This html file is actually a collection of inline SVGs.

3. Copy the html file to your resources folder;

   e.g. resources/META-INF/resources/frontend/styles/

4. And import that using @HtmlImport;

   e.g. @HtmlImport("frontend://styles/icomoon-iconset-svg.html")

5. Then you can create icons using the collection name and the icon name;

   Icon icon = new Icon("icomoon", "mobile");

   • The collection name is the name value in <iron-iconset-svg name=... in the html file.

Mislead

In my Spring Boot project, I had to put html file into: src/main/resources/static/frontend/icons/icomoon-iconset-svg.html and in code use @HtmlImport(value = "frontend://icons/icomoon-iconset-svg.html") – Prostomium

Answer 2

You can also create the icon collection manually. I used https://github.com/vaadin/vaadin-icons/blob/master/iconset.html as a template (more or less):

1. Draw or download some SVG files.

2. Create a new SVG file myicons.svg that starts with

   <iron-iconset-svg name="myiconset"><svg><defs>

3. ... and ends with

   </defs></svg></iron-iconset-svg>

4. Within the defs-tag you insert a "g" element for every graphic, e.g.:

   <g id="myicon" viewBox="0 0 52 56"></g>

5. Set the id unique within this file.

6. Set viewBox attribute (visible dimensions) with the values from the original SVG file.

7. Copy the path element(s) from the original SVG file (and remove any "g" or "symbol" or "title" or whatever else elements that are no path/line/shape) and paste it/them into your newly created "g" elements.

   <path d="m14 15h-13c-.55228475 [...]" />

8. Place this created myicons.svg file wherever you want it to be.

9. Within your Java code read that myicons.svg file and paste it in your site, e.g. in this direct way (and replace the path if you chose another one):

   add(new Html(Files.readString(new File("src/main/webapp/img/myicons.svg").toPath())));

10. Create an icon:

    com.vaadin.flow.component.icon.Icon myIcon = new Icon("myiconset", "myicon"); myIcon.getStyle().set("color", "var(--lumo-primary-text-color)"); add(myIcon);

Trisomic

Thanks for the additional information. However, I wouldn't recommend to include the SVG directly as HTML but as include of the file via @HtmlImport. This way the browser can cache the file. – Yearbook

You are right - using browser cache would improve that solution. Thank you. Additional to @HtmlImport it seems that there has to be at least one additional pseudo @JsModule/@CssImport annotation: [vaadin.com/api/platform/14.1.23/com/vaadin/flow/component/… writes "NOTE: this annotation is only useful in compatibility mode and it is ignored in normal mode. [...] If you want to be able to use your component in both compatibility mode and normal mode of Vaadin 14+ you need to have @HtmlImport along with @JsModule and/or @CssImport annotations." – Trisomic

All these steps can now be automated using this: vaadin.com/docs/latest/components/icons/#icon-set-generator – Dominican

Answer 3

update: starting from Vaadin 14 (except in Compatibility mode) you should instead use @JsModule. i.e. @JsModule("@polymer/iron-icon/iron-icon.js")

Ecclesiastes