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.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.