Where has HtmlImport annotation gone?

Question

I am trying to include custom icons as described in this post. But I can not find the @HtmlImport annotation anymore (Flow V. 20). This annotation was widely used, should it have been replaced I would expect to find at least some documentation.

P.S. I also tried @StyleSheet("./styles/iconexp-iconset-svg.html") bit it complains:

Couldn't find route for 'styles/iconexp-iconset-svg.html'

Answer 1

Bower was deprecated in favor of npm and HTML Imports in favor of ES modules in Vaadin 14. I don't remember when they were removed, but they are no longer supported in Vaadin 20.

You can check the migration instructions here: https://vaadin.com/docs/v14/guide/upgrading/v10-13/#migration-steps

Answer 2

Building off of Jouni's, here is an example using @JsModule.

(1) Define your iconset in a JavaScript file.

import '@polymer/iron-iconset-svg/iron-iconset-svg';

const templateElem = document.createElement('template');

templateElem.innerHTML = `
<iron-iconset-svg name="namespace"><svg><defs>
    <g id="iconname">...</g>
    ...
</defs></svg></iron-iconset-svg>
`;

document.head.appendChild(templateElem.content);

(2) Import the file in your root layout class.

@JsModule("./icons.js")
public class RootLayout...