Add inline SVG in the dashboard

Dashboard
1

Hi there,
I searched among the icons present in node red but I did not find any that suited me.
So I looked through the icons in https://materialdesignicons.com/ and I found some that look perfect, the problem is that my node red server hasn't accessed the web.
I was wondering, is there a way to insert inline SVG on the dashboard?

This is my test with a font awesome icon and inline svg

[{"id":"290d0af4.8dbf06","type":"ui_text","z":"16f94158.fdac4f","group":"596a864e.5c3778","order":3,"width":6,"height":2,"name":"","label":"Pre-Heating Status:","format":"<font color= {{msg.textColor}} > {{msg.text}}&emsp;&emsp;</font> {{msg.icon}}","layout":"row-spread","x":910,"y":2540,"wires":[]},{"id":"742c1c2.05f71e4","type":"function","z":"16f94158.fdac4f","name":"SetValueToIcon","func":"if (msg.payload == 1){\n    msg.icon = '<font color= #ff9900><i class=\"fa fa-fire fa-2x\"></i></font>';\n    msg.text = 'Enabled';\n    msg.textColor = \"#fff\";\n}else{\n    msg.icon = '<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\"> <path fill=\"currentColor\" d=\"M7.95,3L6.53,5.19L7.95,7.4H7.94L5.95,10.5L4.22,9.6L5.64,7.39L4.22,5.19L6.22,2.09L7.95,3M13.95,2.89L12.53,5.1L13.95,7.3L13.94,7.31L11.95,10.4L10.22,9.5L11.64,7.3L10.22,5.1L12.22,2L13.95,2.89M20,2.89L18.56,5.1L20,7.3V7.31L18,10.4L16.25,9.5L17.67,7.3L16.25,5.1L18.25,2L20,2.89M2,22V14A2,2 0 0,1 4,12H20A2,2 0 0,1 22,14V22H20V20H4V22H2M6,14A1,1 0 0,0 5,15V17A1,1 0 0,0 6,18A1,1 0 0,0 7,17V15A1,1 0 0,0 6,14M10,14A1,1 0 0,0 9,15V17A1,1 0 0,0 10,18A1,1 0 0,0 11,17V15A1,1 0 0,0 10,14M14,14A1,1 0 0,0 13,15V17A1,1 0 0,0 14,18A1,1 0 0,0 15,17V15A1,1 0 0,0 14,14M18,14A1,1 0 0,0 17,15V17A1,1 0 0,0 18,18A1,1 0 0,0 19,17V15A1,1 0 0,0 18,14Z\" /></svg>';\n    msg.text = 'Disabled';\n    msg.textColor = \"#ccc\";\n}\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":660,"y":2540,"wires":[["290d0af4.8dbf06"]]},{"id":"d410bbf4.eabf08","type":"inject","z":"16f94158.fdac4f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":470,"y":2500,"wires":[["742c1c2.05f71e4"]]},{"id":"495d5b0.8af62a4","type":"inject","z":"16f94158.fdac4f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":470,"y":2560,"wires":[["742c1c2.05f71e4"]]},{"id":"596a864e.5c3778","type":"ui_group","name":"Pre Heating","tab":"ba0d7ed9.92108","order":4,"disp":true,"width":"6","collapse":false},{"id":"ba0d7ed9.92108","type":"ui_tab","name":"ENV TEMPERATURE","icon":"fa-thermometer-full fa-lg","order":19,"disabled":false,"hidden":false}]
2

See the readme re Icons - You can use icofont to create your own icon set and save that locally.
GitHub - node-red/node-red-dashboard: A dashboard UI for Node-RED

1 Like
3

Below code in your function node works as long as you pre-load the svg file to your static folder.

if (msg.payload == 1){
    msg.icon = '<font color= #ff9900><i class="fa fa-fire fa-2x"></i></font>';
    msg.text = 'Enabled';
    msg.textColor = "#fff";
}else{
    msg.icon = msg.icon = '<img src="/svg/alien-outline.svg" />';
    msg.text = 'Disabled';
    msg.textColor = "#ccc";
}


return msg;

temp

2 Likes
4

Thanks Dceejay, there are many icons inside iconfont but they don't seem suitable for the automation world.
It would be great to be able to create a portfolio of icons from materialdesingicon in a similar way

5

This is a good solution, but is there a way to insert them from css files and not with every single svg?

6

I know it is trivial using the ui Node however I never tried using other widget.

1 Like
7

Well there is a probably a way to create your own curated set of icons - but that is not something I have done - so you will have to do it yourself.

1 Like
8

ok i understand, thanks everyone for the help

9

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