# Icons not showing

**URL:** <https://discourse.nodered.org/t/icons-not-showing/31310>\
**Category:** Dashboard\
**Created:** [8 August 2020 11:58 UTC](https://discourse.nodered.org/t/icons-not-showing/31310 "2020-08-08T11:58:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![JeroenKokhuis](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@JeroenKokhuis](https://discourse.nodered.org/u/JeroenKokhuis)\
**Post date:** [8 August 2020 11:58 UTC](https://discourse.nodered.org/t/icons-not-showing/31310/1 "2020-08-08T11:58:27Z")

</div>

Hello,

I'm just starting with node red and I have a question.

This is my flow:

```auto
[{"id":"aebc50d6.7a096","type":"exec","z":"6a2785b5.687a8c","command":"curl -v --cookie \"RovaLc_inwoners={\\\"Id\\\":901516,\\\"ZipCode\\\":\\\"7671GT\\\",\\\"HouseNumber\\\":\\\"22\\\",\\\"HouseAddition\\\":null,\\\"Municipality\\\":\\\"Vriezenveen\\\",\\\"Province\\\":null,\\\"Firstname\\\":null,\\\"Lastname\\\":null,\\\"UserAgent\\\":\\\"\\\",\\\"School\\\":null,\\\"Street\\\":null,\\\"Country\\\":null,\\\"Portal\\\":null,\\\"AreaLevel\\\":5,\\\"City\\\":\\\"Vriezenveen\\\",\\\"Ip\\\":null}\" https://www.rova.nl/api/TrashCalendar/GetCalendarItems?portal=inwoners","addpay":true,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"Garbage","x":320,"y":1520,"wires":[["62e9a645.7593c8"],[],[]]},{"id":"6cf8f848.71eea8","type":"inject","z":"6a2785b5.687a8c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":1520,"wires":[["aebc50d6.7a096"]]},{"id":"62e9a645.7593c8","type":"json","z":"6a2785b5.687a8c","name":"","property":"payload","action":"","pretty":false,"x":510,"y":1520,"wires":[["adda730.3e3399","ca2a3140.79d94","1c43746.9aef78c","d544a03.f9af16"]]},{"id":"adda730.3e3399","type":"debug","z":"6a2785b5.687a8c","name":"json","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":690,"y":1840,"wires":[]},{"id":"ca2a3140.79d94","type":"function","z":"6a2785b5.687a8c","name":"Kleur en icoon","func":"if(msg.payload[2].GarbageType === \"GFT\"){\n msg.ui_control = {icon:\"icons/gft_60.png\", tooltip:\"GFT\"};\n msg.label = \"\"\n}\nif(msg.payload[2].GarbageType == \"Restafval\"){\n msg.ui_control = {icon:\"icons/restafval_60.png\", tooltip:\"Restafval\"};\n msg.label = \"\"\n}\nif(msg.payload[2].GarbageType == \"PMD\"){\n msg.ui_control = {icon:\"icons/pmd_60.png\", tooltip:\"PMD afval\"};\n msg.label = \"\"\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":1720,"wires":[["96b5ffcb.45c77","77521da2.4e54f4"]]},{"id":"1c43746.9aef78c","type":"function","z":"6a2785b5.687a8c","name":"Kleur en icoon","func":"if(msg.payload[1].GarbageType === \"GFT\"){\n msg.ui_control = {icon:\"icons/gft_60.png\", tooltip:\"GFT\"};\n msg.label = \"\"\n}\nif(msg.payload[1].GarbageType == \"Restafval\"){\n msg.ui_control = {icon:\"icons/restafval_60.png\", tooltip:\"Restafval\"};\n msg.label = \"\"\n}\nif(msg.payload[1].GarbageType == \"PMD\"){\n msg.ui_control = {icon:\"icons/pmd_60.png\", tooltip:\"PMD afval\"};\n msg.label = \"\"\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":1520,"wires":[["33279851.5568f8","df2ef7d5.21a4f8"]]},{"id":"d544a03.f9af16","type":"function","z":"6a2785b5.687a8c","name":"Kleur en icoon","func":"if(msg.payload[0].GarbageType === \"GFT\"){\n msg.ui_control = {icon:\"icons/gft_60.png\", tooltip:\"GFT\"};\n msg.label = \"\"\n}\nif(msg.payload[0].GarbageType == \"Restafval\"){\n msg.ui_control = {icon:\"icons/restafval_60.png\", tooltip:\"Restafval\"};\n msg.label = \"\"\n}\nif(msg.payload[0].GarbageType == \"PMD\"){\n msg.ui_control = {icon:\"icons/pmd_60.png\", tooltip:\"PMD afval\"};\n msg.label = \"\"\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":1340,"wires":[["baf4da2.70b8b28","3084d4a3.297d8c","9c0fb2dd.c32c3"]]},{"id":"baf4da2.70b8b28","type":"ui_text","z":"6a2785b5.687a8c","group":"11a007f.21b0df8","order":3,"width":0,"height":0,"name":"","label":"","format":" <img src=\"{{msg.ui_control.icon}}\" width=\"30\" height=\"30\">{{msg.payload[0].GarbageType}}{{msg.payload[0].Date | date:\"dd-MM\"}}","layout":"row-left","x":950,"y":1420,"wires":[]},{"id":"5c5ab5b2.3b7e6c","type":"ui_text","z":"6a2785b5.687a8c","group":"11a007f.21b0df8","order":3,"width":0,"height":0,"name":"","label":"","format":" <img src=\"{{msg.payload1}}\" width=\"30\" height=\"30\">{{msg.payload[1].GarbageType}}{{msg.payload[1].Date | date:\"dd-MM\"}}","layout":"row-left","x":1310,"y":1600,"wires":[]},{"id":"96b5ffcb.45c77","type":"ui_text","z":"6a2785b5.687a8c","group":"11a007f.21b0df8","order":3,"width":0,"height":0,"name":"","label":"","format":" <img src=\"{{msg.ui_control.icon}}\" width=\"30\" height=\"30\">{{msg.payload[2].GarbageType}}{{msg.payload[2].Date | date:\"dd-MM\"}}","layout":"row-left","x":950,"y":1760,"wires":[]},{"id":"fa29baef.f13828","type":"ui_template","z":"6a2785b5.687a8c","group":"ecb16f49.be2bc","name":"","order":3,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<body>\n<table style=\"width:100%\">\n <tr>\n <th align=\"left\">Afval</th>\n <th align=\"left\">Soort</th> \n <th align=\"left\">Ophaaldag</th>\n </tr>\n <tr>\n <td><img src=\"{{msg.icon0}}\" width=\"30\" height=\"30\"></td>\n <td>{{msg.payload[0].GarbageType}}</td> \n <td>{{msg.payload[0].Date | date:\"dd-MM\"}}</td>\n </tr>\n <tr>\n <td><img src=\"{{msg.icon1}}\" width=\"30\" height=\"30\"></td>\n <td>{{msg.payload[1].GarbageType}}</td>\n <td>{{msg.payload[1].Date | date:\"dd-MM\"}}</td>\n </tr>\n <tr>\n <td><img src=\"{{msg.icon2}}\" width=\"30\" height=\"30\"></td>\n <td>{{msg.payload[2].GarbageType}}</td>\n <td>{{msg.payload[2].Date | date:\"dd-MM\"}}</td>\n </tr>\n</table>\n\n</body>\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1320,"y":1520,"wires":[[]]},{"id":"d5311bc8.f195c8","type":"debug","z":"6a2785b5.687a8c","name":"payload0","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1280,"y":1300,"wires":[]},{"id":"3084d4a3.297d8c","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"icon0","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":1340,"wires":[["fa29baef.f13828","d5311bc8.f195c8"]]},{"id":"33279851.5568f8","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"icon1","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":1520,"wires":[["fa29baef.f13828","5c5ab5b2.3b7e6c","ee74d1d4.e2803"]]},{"id":"77521da2.4e54f4","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"icon2","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":1720,"wires":[["fa29baef.f13828"]]},{"id":"ee74d1d4.e2803","type":"debug","z":"6a2785b5.687a8c","name":"payload1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1280,"y":1380,"wires":[]},{"id":"df2ef7d5.21a4f8","type":"debug","z":"6a2785b5.687a8c","name":"payload 1 voor change","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"ui_control.icon","targetType":"msg","statusVal":"","statusType":"auto","x":1000,"y":1480,"wires":[]},{"id":"9c0fb2dd.c32c3","type":"debug","z":"6a2785b5.687a8c","name":"payload 0 voor change","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"ui_control.icon","targetType":"msg","statusVal":"","statusType":"auto","x":1000,"y":1280,"wires":[]},{"id":"2c406478.cf1c8c","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"temp °C / humi %","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"temp","fromt":"str","to":"temperature","tot":"flow"},{"t":"change","p":"payload","pt":"msg","from":"humi","fromt":"str","to":"humidity","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":1200,"y":1820,"wires":[[]]},{"id":"11a007f.21b0df8","type":"ui_group","z":"","name":"Afval","tab":"1d6f099d.5cd136","order":4,"disp":true,"width":"6","collapse":false},{"id":"ecb16f49.be2bc","type":"ui_group","z":"","name":"Afval","tab":"1d6f099d.5cd136","order":5,"disp":true,"width":"6","collapse":false},{"id":"1d6f099d.5cd136","type":"ui_tab","z":"","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

```

and this is how it looks like:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/30dc1a897182bd56a1724d662924f28f03e5f20f.png)

This first icon is showing but the second and third not. Can someone please help me with this?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 August 2020 14:11 UTC](https://discourse.nodered.org/t/icons-not-showing/31310/2 "2020-08-08T14:11:59Z")

</div>

Put a `debug` node (set to display the Complete msg object) after the `json` node and run the flow. Then copy the contents of the object and paste it to a reply. Then I (or someone else) will have a chance to see what you are doing.

Where are the images/icons stored??

---

<div class="post-metadata">

**Author:** ![JeroenKokhuis](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@JeroenKokhuis](https://discourse.nodered.org/u/JeroenKokhuis)\
**Post date:** [9 August 2020 08:43 UTC](https://discourse.nodered.org/t/icons-not-showing/31310/3 "2020-08-09T08:43:15Z")

</div>

Here is the output after te json node:

` [{"GarbageTypeCode":"RESTAFVAL","GarbageType":"Restafval","Date":"2020-08-13T00:00:00","Regular":true},{"GarbageTypeCode":"GFT","GarbageType":"GFT","Date":"2020-08-21T00:00:00","Regular":true},{"GarbageTypeCode":"PMD","GarbageType":"PMD","Date":"2020-08-28T00:00:00","Regular":true}]`

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/a/0a0357b5ba09b5c7aa33ce84f4ad567ecc26b33d.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/859cddf3d5f61c74aea004eaf274d9dccbd972ab.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [9 August 2020 09:50 UTC](https://discourse.nodered.org/t/icons-not-showing/31310/4 "2020-08-09T09:50:42Z")

</div>

Where are the images/icons stored??

---

<div class="post-metadata">

**Author:** ![JeroenKokhuis](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@JeroenKokhuis](https://discourse.nodered.org/u/JeroenKokhuis)\
**Post date:** [9 August 2020 10:18 UTC](https://discourse.nodered.org/t/icons-not-showing/31310/5 "2020-08-09T10:18:37Z")

</div>

at the same webserver as Node Red. In a map called /icons/ and its accessible from:

[http://192.168.1.6:1880/ui/icons/restafval\_60.png](http://192.168.1.6:1880/ui/icons/restafval_60.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [9 August 2020 11:19 UTC](https://discourse.nodered.org/t/icons-not-showing/31310/6 "2020-08-09T11:19:46Z")

</div>

Ok one of the issues is your template node. You have three msgs that will arrive at different times that will build the contents of the template. So whena msg goes thru the `change` node "set msg.icon2" it creates a msg.icon2 to pass to the `template` node, but msg.icon1 and msg.icon0 will not exist in that msg so there will be no reference in the html code that is built.

You will need to use a `join` node to join all three msgs before passing on to the `template` node. You might want to look at some of the examples for the `join` node:

 ![Screen Shot 2020-08-09 at 7.10.34 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18bf8ceddd42e5388cbaddcdedab6eb10e2c24ac.png)

---

<div class="post-metadata">

**Author:** ![JeroenKokhuis](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@JeroenKokhuis](https://discourse.nodered.org/u/JeroenKokhuis)\
**Post date:** [9 August 2020 11:46 UTC](https://discourse.nodered.org/t/icons-not-showing/31310/7 "2020-08-09T11:46:58Z")

</div>

Thanks for the solution. It works now:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a72dcc8b8632ef724e93297f28bcd4cfd8cfc01.png)

---

<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:** [23 August 2020 11:47 UTC](https://discourse.nodered.org/t/icons-not-showing/31310/8 "2020-08-23T11:47:02Z")

</div>

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