# Dashboard template - want to send icon by msg.payload, but doesn't work

**URL:** <https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953>\
**Category:** Dashboard\
**Created:** [2 August 2022 21:33 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953 "2022-08-02T21:33:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![zub](https://avatars.discourse-cdn.com/v4/letter/z/a6a055/32.png) [@zub](https://discourse.nodered.org/u/zub)\
**Post date:** [2 August 2022 21:33 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953/1 "2022-08-02T21:33:39Z")

</div>

Hi, it must be something obvious as I can't find solution.

I try to use template to show icon  
if I enter to template  
  
i have nice fire icon.

However, I want to do it programmically, so I try to inject message with  
msg.payload = "fa fa-fire"

and use template as   
which doesn't work.

Any thought?

```auto
[
    {
        "id": "532afaeffa9bb8d3",
        "type": "tab",
        "label": "FVE-voda",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "c96f5e956a370175",
        "type": "ui_template",
        "z": "532afaeffa9bb8d3",
        "group": "efe90ccc384fb6b3",
        "name": "",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "<i class=\"{{msg.payload}}\"></i>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 640,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "ccd2f3cbf9d29fbe",
        "type": "inject",
        "z": "532afaeffa9bb8d3",
        "name": "icon",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "\"fa fa-fire\"",
        "payloadType": "str",
        "x": 330,
        "y": 300,
        "wires": [
            [
                "c96f5e956a370175"
            ]
        ]
    },
    {
        "id": "efe90ccc384fb6b3",
        "type": "ui_group",
        "name": "Try",
        "tab": "0445cf945958507f",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "0445cf945958507f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 3
    }
]

```

Node red v 2.2.2 on raspberry

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [2 August 2022 21:43 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953/2 "2022-08-02T21:43:59Z")

</div>

It is already set us string type in the Debug node  
No need to use the extra quotes that you have around the string `"fa fa-fire"`

Use :

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

---

<div class="post-metadata">

**Author:** ![zub](https://avatars.discourse-cdn.com/v4/letter/z/a6a055/32.png) [@zub](https://discourse.nodered.org/u/zub)\
**Post date:** [2 August 2022 22:37 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953/3 "2022-08-02T22:37:47Z")

</div>

thanks for response,

right, that works ... but I have now problem with refresh {?}

once I deploy flow, it doesnt work,

I have to switch between dashboard groups - there and back - viola - works.  
Can I do that in the code?

Many thanks

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [2 August 2022 22:54 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953/4 "2022-08-02T22:54:27Z")

</div>

maybe you need to give your icon an initial size with `style` ?

**Test Flow**

```auto
[{"id":"c96f5e956a370175","type":"ui_template","z":"532afaeffa9bb8d3","group":"efe90ccc384fb6b3","name":"","order":7,"width":0,"height":0,"format":"<i class=\"{{msg.payload}} fa-2x\" style=\"width:32px; height:32px;\"></i>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":640,"y":300,"wires":[[]]},{"id":"ccd2f3cbf9d29fbe","type":"inject","z":"532afaeffa9bb8d3","name":"icon fire","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fa fa-fire","payloadType":"str","x":390,"y":240,"wires":[["c96f5e956a370175"]]},{"id":"86f2f5f87caa980c","type":"inject","z":"532afaeffa9bb8d3","name":"icon snowflake","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fa fa-snowflake-o","payloadType":"str","x":360,"y":340,"wires":[["c96f5e956a370175"]]},{"id":"efe90ccc384fb6b3","type":"ui_group","name":"Try","tab":"0445cf945958507f","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"0445cf945958507f","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":3}]

```

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [3 August 2022 00:51 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953/5 "2022-08-03T00:51:39Z")

</div>

perhaps a bit overdosed but this works for me:

```auto
[
    {
        "id": "92f5052ca0054b2b",
        "type": "tab",
        "label": "FVE-voda",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "f7f73fae9e56865b",
        "type": "ui_template",
        "z": "92f5052ca0054b2b",
        "group": "efe90ccc384fb6b3",
        "name": "",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "<span ng-if=\"IsMaterialIcon()===false\">\n <i class=\"{{GetIcon()}}\" ng-class=\"icon\"></i>\n</span> \n<span ng-if=\"IsMaterialIcon()===true\">\n <ui-icon icon=\"{{GetIcon()}}\" aria-hidden=\"false\">\n <i class=\"{{GetIcon()}}\" ng-class=\"icon\"></i>\n </ui-icon>\n</span> \n\n<script>\n (function(scope){\n scope.icon = '';\n scope.GetIcon = function(){\n return scope.icon;\n }\n scope.IsMaterialIcon = function(){\n if(scope.icon.slice(0,2)=='mi'){\n return true;\n }else{\n return false;\n }\n }\n \n scope.$watch('msg', function(msg) {\n try{\n switch(msg.topic){\n case 'icon':\n scope.$applyAsync(function(){\n scope.icon = msg.payload;\n });\n break;\n default:\n break;\n }\n }catch(err){\n \n }\n \n });\n })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 720,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "201b3f29ae494883",
        "type": "inject",
        "z": "92f5052ca0054b2b",
        "name": "font awesome icon",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "icon",
        "payload": "fa fa-fire",
        "payloadType": "str",
        "x": 470,
        "y": 200,
        "wires": [
            [
                "f7f73fae9e56865b"
            ]
        ]
    },
    {
        "id": "b81c6907facd3e40",
        "type": "inject",
        "z": "92f5052ca0054b2b",
        "name": "material icon",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "icon",
        "payload": "mi-play_arrow",
        "payloadType": "str",
        "x": 490,
        "y": 320,
        "wires": [
            [
                "f7f73fae9e56865b"
            ]
        ]
    },
    {
        "id": "efe90ccc384fb6b3",
        "type": "ui_group",
        "name": "Try",
        "tab": "0445cf945958507f",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "0445cf945958507f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 3
    }
]

```

---

<div class="post-metadata">

**Author:** ![zub](https://avatars.discourse-cdn.com/v4/letter/z/a6a055/32.png) [@zub](https://discourse.nodered.org/u/zub)\
**Post date:** [3 August 2022 06:34 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953/6 "2022-08-03T06:34:06Z")

</div>

Now this works well! Thank you

---

<div class="post-metadata">

**Author:** ![zub](https://avatars.discourse-cdn.com/v4/letter/z/a6a055/32.png) [@zub](https://discourse.nodered.org/u/zub)\
**Post date:** [3 August 2022 06:36 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953/7 "2022-08-03T06:36:03Z")

</div>

Thank you,

this is far beyond my knowledge 🙂  
However works great, and good study material.

Thank you

---

<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:** [2 September 2022 06:36 UTC](https://discourse.nodered.org/t/dashboard-template-want-to-send-icon-by-msg-payload-but-doesnt-work/65953/8 "2022-09-02T06:36:25Z")

</div>

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