setIcon() with SVG


our design guys found out, that an inline SVG can be nicely styled with simple CSS. Now they asked me to set the icons of components (like buttons, tabs, etc.) as inline SVGs. Unfortunately, the AbstractComponent’s method setIcon() creates an img tag and loads the icon as external resource. For buttons, it is possible to (mis)use the caption’s HTML capability (I can load the SVG source as caption, and the SVG is shown inline then), but this does not work for most other components. And externally loaded SVGs cannot be styled so easy with simple CSS.

Is there any easy solution to show component icons as inline SVGs?

You have tried something like that?

            new Label("<your svg here>", ContentMode.HTML);

For labels and buttons, this works quite nicely, and I already use that workaround. Unfortunately, I also need a solution for Tabsheet.Tabs, to show the state of an Accordion tab. For these, I can set an icon, and a caption, but cannot enable HTML for the caption (or I didn’t find a way to do that).

What you wish might actually be possible but requires customization. You’d need a new server-side Resource subclass with a “pseudo-URL” that contains the inline SVG; then you’d need to subclass (and replace in the widgetset) c.v.client.ApplicationConnection, overriding the getIcon method with a version that recognizes the custom URL and returns a custom Icon instance whose getElement contains the SVG.

It’s pretty much how font icons are implemented; indeed, before the changes required by the font icon support this would have been pretty impossible to do even in theory.

Thanks, Johannes, I’ll try that and will report my experiences here.

Hi Frank

any progress?



I am also interested in this. Any help with the subclass would be appreciated