Home automation icons - how can additional icons be installed and used?

Dashboard
1

My Question: how to install and use additional Icons to the dashboard (for offline use)

Since a while I have trouble finding nice icons.

Out of the 2019 survey: Node-RED is used for Home automation by 75.7% of the participants. So there should be many users looking for suitable icons to identify:

  • rooms (I found only a bed and knife and fork)
  • electric installation (lightbulb, switches ...)
  • a/v equipment (tv, speaker, amplifier ...)
  • household equipment (oven, mixer, coffee machine...)
  • mechanical and plumbing (valves, fans, water hoses....)
  • bathroom equipment (shower, bathtub)
  • garden equipment (pumps, sprinkler ...)
  • and many others

I know there are many Creative Commons licensed (or similar free licenses) icons available ... but how can they be selected, compiled and used the same or similar way as fa or material icons.

1 Like
2

+1 ... coincidence ... I was just about to check available icons. Few usable available via supported icon themes.

3

hmm - been a while - but Paul used to load external icons (for weather) like this - https://flows.nodered.org/flow/d65756991da6df708400b9d9819ed9b7 - we stopped having to do this when he created a nice subset that was small enough to load all the time).

I then added support for icofont (https://icofont.com/ ) fonts that could be loaded via a template in a similar manner but if loaded in the head could then be used more widely within dashboard by using icofont- as a prefx (like fa- fonts are). So you can go to their site and create your own collection of icons to load.

image

[{"id":"f8da13db.bf715","type":"ui_template","z":"c4f68fc3.2dd88","group":"68d7ee81.54ea9","name":"","order":0,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"/icofont.css\">","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":300,"y":300,"wires":[[]]},{"id":"df12003.e1dbe","type":"ui_button","z":"c4f68fc3.2dd88","name":"","group":"68d7ee81.54ea9","order":1,"width":"5","height":"2","passthru":false,"label":"Washing machine","tooltip":"","color":"","bgcolor":"","icon":"icofont-washing-machine icofont-2x","payload":"","payloadType":"str","topic":"","x":370,"y":360,"wires":[[]]},{"id":"68d7ee81.54ea9","type":"ui_group","z":"","name":"Examples","tab":"4301b423.548afc","order":1,"disp":true,"width":"12","collapse":false},{"id":"4301b423.548afc","type":"ui_tab","z":"c4f68fc3.2dd88","name":"Test","icon":"school","order":4,"disabled":false,"hidden":false}]
3 Likes
4

I have to say that I tend to search out individual SVG images that might be useful and then keep them on hand. I would always want to control loading of images like this and do it from local source. It also saves loading a large library or a webfont when you only need a few images.

5

as long as you can find them in icofont then that allows you to create your own custom package with just the icons you want in it. (so yes can be very small)

6

I think many users like me will be happy to use home automation icons all over the dashboard in an easy way. Weather icons are only a small subset normally used in home automation.

“A picture says more than thousand words” and a icon take less space then a few words.

Thank you for the hints I will see how I can implement this (without the limiting it to the template node)

7

You are right, most of the icons available are useless in a particular dashboard. But always the one you have in mind is missing.
I have no idea how to implement it in an efficient but user friendly way ... I have to do some investigation. So call it a challenge and everybody how is more experienced than me is welcome to participate :hugs:

8

Only the font is loaded via the template - the picture above is just a standard button (but with a washing-machine icon from icofont).

PS you can also use fontello if you wish - but must call the font icofont - so it get picked up correctly.

9

Thanks for the clarification. I’m not able to test it right now but definitely give it a try. I took a quick look into icofont 2.100 icons sound impressive but after a quick search no pump no fan or heater and only one lightbulb and everything in only one state.
If I can’t find a suitable collection perhaps I have to collect and perhaps remix (in example different states) my own one.

10

Several tutorials out there of course... https://rafaltomal.com/how-to-create-and-use-your-own-icon-fonts/

1 Like
11

creating good icons is of course a skill in itself - one which I do not have - so I am happy to leave that to those that can.

1 Like
12

At the risk of being reminded that the editor is not a dashboard... is there a way to include such a package in a node's Appearance dialog in same way that the fa icons are listed? It might be fun to have inject or ui_switch nodes with icons of the devices they control.

13

Not without them being built in, and as far as we know there is no decent small set that would cover everything.

I suppose you could create a dummy node that included all the icons you wanted as the appearance list does let nodes "borrow" from each other.

14

I think the best way would be to compile/remix one or many (see bullet points) icon fonts for the dashboard and then we can see further.
As you noted, it will not be an easy task. I can remember times when I “draw” bitmap icons pixel by pixel and every pixel counted. Preferable as minimalistic as possible to go with existing material design.

15

Good luck. I shall await the results with interest.

16

Can someone elaborate on how to use this?
I imported, deployed and fiddled around with it but couldn't get it to show the washing machine icon.
I'd be happy to change every nodes' icons

17

I never had time to work on this . as many IOT icons are available directly as angular icons I use them (even if they need a internet connection which I can expect from all of my devices)

or here you find an entire section of 378 Icons many community designed:

https://materialdesignicons.com/tag/home-automation

Never had time to compile them to a subset easy to implement locally