Offline Custom Icons

Dashboard
1

I would like to use an icon for a button that is not available in the awesome, weather or material design fonts. And although I was successful using iconify, this is only available while on-line, which does work as I need to be off-line.

I was able to host the icon locally on a web-server, and this worked when using a url in the icon field of the button configuration. But the icon is very small, and I see in the node-red-dashboard source-code that all images are hard coded to 24px. Probably a good reason for this, but causes me problems as I need a larger icon.

I can create my own button using an ui_template, but hoping to find a way to use the button node. Self hosting iconify seems like a lot of work, and have not found a way to update the icons to later versions.

So, I found a solution by placing html and an ing tag in the label field and referencing the locally hosted image.. However, this seems like a bit of a hack. Wondering if anyone has solved how to locally host custom icons and use them as part of a button:

Node-RED version: v2.2.0. Dashboard version 3.1.5

Screen Shot 2022-02-25 at 2.30.02 PM
Screen Shot 2022-02-25 at 2.30.02 PM1010×774 39.9 KB

2

looks perfectly reasonable to me.

3

You could always base64 encode the image and use an inline data url to host it in the html file.

<html>
  <img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ==">
</html>

That way there is no dependency on a remote server.

There is also the option to host the image from within the node using the editor resources

<html>
  <img src="/resources/@scope/node-name/foo.png">
</html>
4

Thanks to both @dceejay and @hardillb. I did not know about editor resources, and I think this is a much cleaner solution. Thanks - stephen

5

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