# Add inline SVG in the dashboard

**URL:** <https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622>\
**Category:** Dashboard\
**Created:** [28 September 2021 13:38 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622 "2021-09-28T13:38:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [28 September 2021 13:38 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/1 "2021-09-28T13:38:07Z")

</div>

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/](https://materialdesignicons) 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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [28 September 2021 15:32 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/2 "2021-09-28T15:32:56Z")

</div>

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](https://github.com/node-red/node-red-dashboard#icons)

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [28 September 2021 15:58 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/3 "2021-09-28T15:58:50Z")

</div>

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

```auto
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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/934fc78d7cc9d83b4c230ac60c3677f6606d5ce0.png)

---

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [29 September 2021 16:11 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/4 "2021-09-29T16:11:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [29 September 2021 16:15 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/5 "2021-09-29T16:15:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [29 September 2021 17:48 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/6 "2021-09-29T17:48:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 September 2021 17:59 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/7 "2021-09-29T17:59:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [30 September 2021 07:26 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/8 "2021-09-30T07:26:10Z")

</div>

ok i understand, thanks everyone for the help

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [14 October 2021 07:27 UTC](https://discourse.nodered.org/t/add-inline-svg-in-the-dashboard/51622/9 "2021-10-14T07:27:00Z")

</div>

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