Change node icon based on config


I would like to be able to change the icon of a node based upon it's config node. I am currently using a config node for the 'device', which supports a number of device types; I would like the icon to dynamically change to show a picture of that device, dependent upon the device type selected. (eg. Door Sensor, Thermostat, PIR, Adaptor, etc).

I am currently setting a filename in the 'device' config node for the icon based upon the type of device discovered; which seems to be working OK.

I believe what I need to do is retrieve the 'icon' property from the device config node in the .html for the node, and use a function under RED.node.registerType to set the icon. I currently have this function defined as follows

        icon: function () {
            return (this.device.icon || "Thermostat.png")

This does not work, I suspect that this.device.icon is wrong. Can anyone help with the correct way to do this?

There is an option to set the icon for a node in the 'Appearance' tab on the node properties, but I can't find the code for that in github, I ideally want it to work similarly to this and show the icon too.

Hi @Achronite

there is no support for dynamically changing the node's icon. The icon property in its definition must be a string - it cannot be a Function.

We don't currently expose a way for the oneditprepare function to override the icon either.

1 Like

Thanks @knolleary. Hmmm, maybe the docs need updating then?

The node’s icon is specified by the icon property in its definition.
The value of the property can be either a string or a function.

If it isnt possible to add a function, Is is possible to add a drop down in Properties within the GUI to set the icon instead? So that it works in a similar way to the Appearance tab?

Why do you need it in properties when it is already in appearance ? We aren’t going to confuse people by setting the same thing in two places.

Yes. Noted re docs.