Node-RED and icons

I’ve been looking at Pete Scargill’s thermostat and got stuck on icons. He blogged about icons recently but that didn’t say how to install them.  So on the basis of ‘if I didn’t know there will be others who don’t know’, here’s how to install some icons in Node-RED.

Pete’s suggestion is to create a static folder under the node-red folder and put the icons in there such as home/pi/.node-red/public/myicons .

To make these available you need to edit the file /home/pi/.node-red/settings.js  and add the line

note the closing comma! (there is an example in the default file – just search for it).

I’ll quote a comment Pete made on this (explains it better than I could);

So then the web pages think that the root page for all assets is the above – hence your reference in the web starts at /myicons.

The reason I use myimages and myicons etc is that Node-Red already has some directories it uses for UI and images is one of them – if you make an “images” directory it conflicts – so I just prefix any of my stuff with “my” – so there you go.

That solves where to put them, but what to put there.  Well in his blog he directs you to this open icon set on SourceForge

I downloaded the file from SourceForge and copied it across to the Pi using WinSCP into a folder in my home directory I called ‘icons’.  It is a tar.bz2 file but that is easily unpacked in one go with:

I prefer to keep things like this icon pack separate and link to them so if you want to change the icon set, you just change the link.  To do that move into the public folder you have created  cd /home/pi/.node-red/public and run the following command to create a symbolic link (adjusting paths as necessary) to your icon set;

If you do ls -la you will see the link.  Restart Node-RED

and wait until it has properly started.  Refresh the dashboard page and you should have icons!


Facebooktwitterby feather
This entry was posted in Node-RED, RaspberryPi and tagged , . Bookmark the permalink.

3 Responses to Node-RED and icons

  1. Rodrigo says:

    I would like to know how you use those icons in the dashboard. For example how to change a dashboard button icon in the node properties Icon. I wanna see the icons in the /ui

    • Brian says:

      If you follow the link to Pete Scargill’s blog, you can download the flow from there. You will see some ‘Template’ nodes. In these is the Javascript that contains the icon.

Leave a Reply