How we can create custom Icon in vaadin 14 ? I'm trying to create it using svg code but I always got the same icon

Flow
1

public class ConditionalIconComponent {

public ConditionalIconComponent() {
}

public Icon AlignHorizontallyIcon() {
	Icon icon = new Icon();
	icon.getElement().setProperty("innerHTML",
			"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'>"
					+ "<path d='M3 12l6-6v4h8v4h-8v4z' fill='currentColor' />" + "</svg>");

	icon.getStyle().set("font-size", "200%");
	icon.getStyle().set("color", "white");
	return icon;
}

public Icon AlignVerticallyIcon() {
    Icon icon = new Icon();
    icon.getElement().setProperty("innerHTML",
            "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'>" +
                "<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z' fill='currentColor' />" +
            "</svg>");

    icon.getStyle().set("font-size", "200%");
    icon.getStyle().set("color", "white");
    return icon;
}

}

2

Hello. First of all you need to need to package the SVG icons into a <iron-iconset-svg> bundle, this is just a js file in your frontend folder, something like this:

import "@polymer/iron-iconset-svg/iron-iconset-svg.js";

const template = document.createElement("template");

template.innerHTML = `<iron-iconset-svg name="myiconset" size="24">
  <svg><defs>

  <g id="icon1"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path d='M3 12l6-6v4h8v4h-8v4z' fill='currentColor' /></svg></g>
  <g id="icon2"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z' fill='currentColor' /></svg></g>
  
  
  </defs></svg>
</iron-iconset-svg>`;

document.head.appendChild(template.content);

Then you need to create a Java enum similar to VaadinIcons to use the iconset, for example:


import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.icon.IconFactory;

import java.util.Locale;

@JsModule("./icons/myIconset.js")
public enum MyIconset implements IconFactory {
    
	ICON1, ICON2;

    public Icon create() {
        return new Icon(this.name().toLowerCase(Locale.ENGLISH).replace('_', '-').replaceAll("^-", ""));
    }

    public static final class Icon extends com.vaadin.flow.component.icon.Icon {
        Icon(String icon) {
            super("myiconset", icon);
        }
    }
}

With that, then you can use the icons as MyIconset.ICON1.create();

The methods you shared before can be changed to something like this:

public Icon getAlignHorizontallyIcon() {
        Icon icon = MyIconset.ICON1.create();    
        icon.getStyle().set("color", "red");
        return icon;
    }
    
    public Icon getAlignVerticallyIcon() {
        Icon icon = MyIconset.ICON2.create();     
        icon.getStyle().set("color", "blue");
        return icon;
    }

And I see the icons as

icons-test

Hope this helps!

3

Thanks! it was usefull

1 Like