Custom Icons in HABPanel Template Widget

Apps & Services HABPanel
,
1

HI all,
I am working on some custom widgets, implemented on HabPanel via the Template Widget. E.g. I have a “Network monitoring” widget, checking all my network devices like router, nas, etc. with the Network binding (pingdevice). Based on the state of the Item (On/Off) I want to show an custom icon (icon-on.svg / icon-off.svg). Putting the item in the switch widget an adding a custom icon in the custom ion picker works fine for me, but i dont now how to address the custom icon in the template widget.
This is the code using a standard item:

<widget-icon iconset="'smarthome-set'" icon="'power-button'" size="32" state="itemValue('Asus_device')" /></span>
</button>

Now I want to replace that using the custom item…
Thx for help

2 Likes
2

Any suggestions?

3

You can use pure html for it. Icon or any .png .jpg image. Move it on conf/html folder.

<button style="border: none; background: none;"> <img src="/static/icon.png">
</button>

%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9

4

Or may be this aswer:

5

Ok thanks, will try and let you know. Maybe this is a good workaround. My question on how to address the custom icons in the conf/icon folder within an template widget is still open…:grin:

6

As i know it is not possible. Iconset is hardcoded in Habpane. conf/icon folder for OpeHab basic and classic UI.
So kusanghi way is good solve.

7

I implemented the first solution from @Sturgeon

<button style="border: none; background: none;"> <img src="/static/icon.png">
</button>

Thanks for that.

8

You can also put the youricon-off.svg and youricon-on.svg files in your icons/classic configuration folder and use:

<widget-icon iconset="'custom-icon'" icon="'youricon'" size="32" state="itemValue('Asus_device')" /></span>
</button>
3 Likes
9

That is what i was Looking for, thanks a lot!!