vaadinvaadin20

Where has HtmlImport annotation gone?

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'
Solution

  • 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...