Loading Custom Icons

Custom Deployment
1

Hi,

After a good bit of trial and error I have managed to add a custom asset to my custom project and get that up and running in the manager.

I’ve been trying to add a custom icon to go with the asset.

I found a very brief description of creating and adding custom asset icons here:

I’ve tried taking that code and creating a new file in ui/app/oh/src/index.ts building and spinning up my custom project. Here’s my index.ts

import "@openremote/or-icon";
import {IconSets} from "@openremote/or-icon";

@customElement("oh-icon")
class OH_ICON extends subscribe(manager)(LitElement) {

    public createIconSet() {
        let ohIconSet = {
            size: 100,
            icons: {
                "x": "<path d=\"m0.3125,39.74088l37.33242,0l11.53601,-37.43277l11.53601,37.43277l37.33242,0l-30.20251,23.13446l11.5366,37.43277l-30.20252,-23.13509l-30.20252,23.13509l11.53661,-37.43277l-30.20252,-23.13446z\" stroke-width='5' stroke=\"#000\"/>"

                "pump": "<path d=\"M489.412,37.648H22.588C10.114,37.648,0,47.761,0,60.236v361.41c0,12.475,10.114,22.588,22.588,22.588H46.49 c-0.834,2.358-1.313,4.885-1.313,7.529c0,12.475,10.114,22.588,22.588,22.588h45.176c12.475,0,22.588-10.114,22.588-22.588 c0-2.644-0.477-5.171-1.313-7.529h243.566c-0.836,2.358-1.313,4.885-1.313,7.529c0,12.475,10.113,22.588,22.588,22.588h45.176 c12.475,0,22.588-10.114,22.588-22.588c0-2.644-0.477-5.171-1.313-7.529h23.903c12.475,0,22.588-10.113,22.588-22.588V60.236 C512,47.761,501.886,37.648,489.412,37.648z M466.824,399.058H45.176V82.824h421.647V399.058z\"/> </g> </g> <g> <g> <path d=\"M399.057,210.824h-15.059c-12.475,0-22.588,10.114-22.588,22.588c0,12.475,10.113,22.588,22.588,22.588h15.059 c12.475,0,22.588-10.114,22.588-22.588C421.646,220.938,411.532,210.824,399.057,210.824z\"/> </g> </g> <g> <g> <path d=\"M399.057,120.471h-15.059c-12.475,0-22.588,10.114-22.588,22.588s10.113,22.588,22.588,22.588h15.059 c12.475,0,22.588-10.113,22.588-22.588S411.532,120.471,399.057,120.471z\"/> </g> </g> <g> <g> <path d=\"M399.057,301.177h-15.059c-12.475,0-22.588,10.114-22.588,22.588s10.113,22.588,22.588,22.588h15.059 c12.475,0,22.588-10.114,22.588-22.588S411.532,301.177,399.057,301.177z\"/> </g> </g> <g> <g> <path d=\"M309.423,280.291c-1.55-5.792-5.337-10.729-10.528-13.726l-44.377-25.621l44.377-25.621 c5.191-2.997,8.978-7.935,10.526-13.726c1.55-5.792,0.732-11.96-2.269-17.149c-20.147-34.818-57.626-56.446-97.81-56.446 c-12.475,0-22.588,10.114-22.588,22.588v51.229l-44.377-25.621c-10.796-6.236-24.6-2.542-30.843,8.248 c-9.901,17.107-15.133,36.643-15.133,56.498c0,19.852,5.233,39.388,15.131,56.495c4.186,7.236,11.773,11.279,19.572,11.279 c3.832,0,7.716-0.976,11.273-3.03l44.377-25.62v51.229c0,12.475,10.114,22.588,22.588,22.588c40.184,0,77.663-21.628,97.81-56.443 C310.153,292.25,310.971,286.082,309.423,280.291z M142.712,253.326c-0.753-4.067-1.137-8.213-1.137-12.384 c0.001-4.171,0.385-8.317,1.137-12.384l21.451,12.384L142.712,253.326z M231.93,304.803v-24.737l21.423,12.369 C247.025,297.827,239.755,302.023,231.93,304.803z M231.93,201.818V177.08c7.826,2.78,15.096,6.978,21.423,12.369L231.93,201.818z\"/> stroke-width='2' stroke=\"#1DA57F\""
                }
        }   ;
        IconSets.addIconSet("oh", ohIconSet);
    }
}

The linked post mentions a need to implement some UI code but I could do with some more pointers on what that means and how I might go about achieving it!

Thanks in advance!

2

Hi!

Creating a custom or-icon component named oh-icon would only work for custom apps.
Because the Manager UI will still use the HTML tag <or-icon> for loading the asset icons.

So you’ll need to modify the code of <or-icon>,
through the or-icon-set.ts file, to achieve custom icons within the Manager UI.

However,
I believe there is a different way to set custom asset icons through a configuration file.
Is that correct @Don @Pierre ?

3

Ah ok, thanks Martin. I’ll have a go at editing the or-icon-set file while I await a response from Don or Pierre.

4

Hmm, I don’t think I have ever done that. Is there nothing in Material Design Icons - Icon Library - Pictogrammers that comes close to your icon? :sweat_smile:

5

IconSets are pluggable and the way to add custom icons.

You can then use <or-icon icon="myset:x" />

Where myset is the name of the iconset and x is the icon in that set.

There is a basic example in the core demo:

1 Like