6

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?

Steffen Harbich
  • 2,269
  • 1
  • 29
  • 60

3 Answers3

6

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.
Youness
  • 1,526
  • 19
  • 26
  • 1
    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")` – Igor Delac Mar 25 '19 at 11:08
1

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);

S. Doe
  • 445
  • 3
  • 13
  • 1
    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. – Steffen Harbich Apr 05 '20 at 06:58
  • 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: [https://vaadin.com/api/platform/14.1.23/com/vaadin/flow/component/dependency/HtmlImport.html] 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." – S. Doe Apr 05 '20 at 09:20
1

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

Luis Gtz
  • 11
  • 1