Custom icons in OH3 widgets

Hey community and a big THANK YOU for the great OH3 update!

I’m currently playing around with the new widgets and I want to include own icons.

Summary

Unfortunately I can’t make it work. The icons are not displayed in the Main UI. I named my icons according to the documentation https://www.openhab.org/docs/configuration/items.html#icons

I placed my icons in the folder icons/clasic/ and also tried to place it into icons/. Both ways didn’t work.

I didn’t make it work in a widget. So I tried to use my own icon in a Cell in the Layout Page designer. There I also had the same problem.

My sample YAML configuration (generated through the visual configuration panel) of the cell in the layout page:

component: oh-cell
config:
  header: Header-TEXT
  icon: wassertropfen
  footer: Footer-TEXT
  subtitle: Subtitle-TEXT
  title: Title-TEXT

Thank you all in advance! :slight_smile:

This text will be hidden

In the Summary above is the original post is included.
Below I would like to describe my solution and maybe it can support other community members.



Using custom made icons in your openHAB instance

1. Create your own icon
To create icons I use the free tool https://app.diagrams.net/ or also known as https://draw.io
With this tool you can make really good vector based graphics <=> resolution of the graphic is independent if graphic is zoomed. So that is really good


In the screenshot above you can see, I created three different color schemas for an valve icon:

  • Green icon: state of the switch “ON”
  • Red icon: state of the switch “OFF”
  • Black icon: base state or UDEF state of switch

2. Export your icons
The mentioned program above has some good options for exporting drawn shapes. My workflow is as follows:

  • 2.1: Only select the shape or the groups of shapes, which should be in ONE custom icon. In the example below I selected only the green icon of my valve

  • 2.2: Now click in the main menu of the mentioned program: => File => Export as => SVG

  • 2.3: A small popover window will be displayed. In this window one can select the export options. I prefer to export with transparent background and I don’t include a copy of my diagram. This will make the SVG file unnecessary big! Store your diagram in the native way!
    Important ist to select “Selection only” and “Crop”. This will produce an SVG file, which is only big enough to hold your custom icon!

  • 2.4: After clicking Export a window will pop up of your operating system to ask you where to store the exported file. Store the SVG custom icon file in the standard folder of openHAB. The directory structure is shown below.
    For my green valve icon I chose following file name: water_magneticvalve-ON.svg
    The file name follows the naming schema presented in the openHAB documentation: Items | openHAB

    I extended this naming schema for my personal use with an prefix “water_”. I call this prefix “DOMAIN”. So everything what belongs to the domain “WATER” I prefix with “water_”. Other possible domains would be for example “heating_”, “light_”, or what ever you like to have!

    The dash or minus symbol after “magneticvalve” is to indicate possible state relevant icons. If the switch item is in the state “ON” the green custom icon will be selected by the openHAB UI.

    + openhab_conf/
    |
    + icons/
    |       |
    |       + classic/
    |       |      +--- YOUR CUSTOM ICON.svg
    |       |      +--- <DOMAIN>_<ICONNAME>.svg
    |       |      +--- <DOMAIN>_<ICONNAME>-<STATE>.svg
    |
    + html/ and all the other standard folders
    
  • 2.5: Repeat steps 2.1 till 2.4 for every state you wish to have. In my case or in the given example I created following file:

    + icons/
    |     |
    |     + water_magneticvalve.svg
    |     + water_magneticvalve-ON.svg
    |     + water_magneticvalve-OFF.svg
    |
    

3. Configure your custom icons in your main UI
To make the icon state dependent (if valve is OFF => red icon; if valve is ON => green icon) then I needed to active the option “show advanced” or you can choose to edit it directly in the YAML format.

component: oh-label-card
config:
  title: Toggle the Magnetic Valve
  item: Main_Magnetic_Valve
  action: toggle
  icon: oh:water_magneticvalve
  actionCommand: ON
  actionCommandAlt: OFF
  label: Magnetic Vavle
  iconUseState: true

Important: if you want state dependent icons don’t use the icon name with the given state! (in the example ON or OFF). Choose the basic icon with no file type! (in the example - no “.svg”). Also add the prefix “oh:” in the YAML configuration at the setting “item:”. Without this prefix, openHAB will not find your custom icon. (Thanks to @Vradatta for pointing out this! :+1:)
With the setting described, you get the following results:
Item is switched OFF

Item is switched ON

As you can see, the color of the custom icon changes from red to green. For illustration purposes I also added a basic “oh-toggle-card” to show the reader the state change of the linked switch item.


I hope my basic attempt to describe these steps can help other community members!
Have fun with creating your own icons :partying_face:


Disclaimer: If you find any personal information of myself in the presented screenshots, please point this out to me. I will update the corresponding screen shots.Thank you! :slight_smile:

Hint to myself: Never think your documented workflow is finished in the first draft :stuck_out_tongue:

8 Likes

See here -

Maybe I’m wrong but I think you have to use oh:wassertropfen

Thank you @rossko57 for your reply!

If I understand it right, in the referenced post the icon is set with an item.

What I want to do is to set a custom icon in the text field of the oh-cell. There is currently no item linked. I just want to show some text with icons.


With standard icon
The first screenshot represents the oh-cell in the main-ui with the given configuration of post 1, but with one of the standard icons of the f7-Framework: f7:alarm_fill

Bildschirmfoto 2021-01-31 um 13.38.07

the configuration in YAML:

component: oh-cell
config:
  header: Header-TEXT
  icon: f7:alarm_fill
  footer: Footer-TEXT
  subtitle: Subtitle-TEXT
  title: Title-TEXT

If I use my own icons, I get this result:
Bildschirmfoto 2021-01-31 um 13.37.27

the configuration in YAML:

component: oh-cell
config:
  header: Header-TEXT
  icon: wassertropfen
  footer: Footer-TEXT
  subtitle: Subtitle-TEXT
  title: Title-TEXT

I tried following file structure

+ openhab_comf/
|
+ icons/
|       |
|       + classic/
|       |      +--- wassertropfen.svg
|       |      +--- wassertropfen16.png
|       |      +--- wassertropfen32.png
|       |
|       +--- wassertropfen.svg
|       +--- wassertropfen16.png
|       +--- wassertropfen32.png
|
+ html/ and all the other standard folders

In the file structure are also *.png files shown. I also tried instead of the *.svg files the files with *.png

Thank you @Vradatta! You gave me a good hint!

I tried to use your recommendation! It worked!!

1 Like

I didn’t know this programm and will give it a try this week, thanks for sharing

You can also use emojis weithin texts …

you need to prefix your icon name with oh:

please correct spelling to + /srv/openhab-conf
“-” instead of “_” and “conf” not “comf”

1 Like

Thank you for your feedback! I updated the original post :slight_smile:

sorry for beeing fussy. but as on my local SSH it seams to be “-” not “_” :wink:

A good way to test on OH3 ist http://x.x.x.x:8080/developer/
–>“Debug”
–>“Test an icon fetch to check the different implementations”