# Help with icon in \`text\` node

**URL:** <https://discourse.nodered.org/t/help-with-icon-in-text-node/34801>\
**Category:** Dashboard\
**Created:** [26 October 2020 03:01 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801 "2020-10-26T03:01:01Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 October 2020 03:01 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/1 "2020-10-26T03:01:02Z")

</div>

I thought I had it down pat, but it isn't working.

`msg.payload` comes in with a value. 0 - 360. (Direction.)

Depending on the direction, it sets the arrow pointing to that _corner_.

The `node.warn` works, but the icon isn't getting through for reasons unknown.

```auto
[{"id":"d3f4d577.4a2e7","type":"function","z":"ae12fd.00ef75","name":"","func":"var direction = msg.payload;\nif (direction > 338)\n{\n node.warn(\"N\");\n msg.payload = '<i <span class=\"material-icons\">north</span></i>';\n return msg;\n} else\nif (direction < 22)\n{\n node.warn(\"N\");\n msg.payload = '<i <span class=\"material-icons\">north</span></i>';\n return msg;\n} else\nif (direction >=22)\n{\n if (direction < 67)\n {\n node.warn(\"NE\")\n msg.payload = '<i <span class=\"material-icons\">north_east</span></i>';\n return msg;\n } else\n if (direction < (67+45))\n {\n node.warn(\"E\")\n msg.payload = '<i <span class=\"material-icons\">east</span></i>';\n return msg;\n } else\n if (direction < (67 + 90))\n {\n node.warn(\"SE\")\n msg.payload = '<span <i class=\"material-icons\">south_east</i></span>';\n return msg;\n } else\n if (direction < (67 + 90 + 45))\n {\n node.warn(\"S\")\n msg.payload = '<i <span class=\"material-icons\">south</span></i>';\n return msg;\n } else\n if (direction < (67 + 180))\n {\n node.warn(\"SW\")\n msg.payload = '<i <span class=\"material-icons\">south_west</span></i>';\n return msg;\n } else\n node.warn(\"W\")\n msg.payload = '<i <span class=\"material-icons\">west</span></i>';\n return msg;\n}\n//return msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":990,"y":810,"wires":[["f5a316a7.dc33b8","96773fd0.4f8ac"]]},{"id":"f5a316a7.dc33b8","type":"ui_text","z":"ae12fd.00ef75","group":"7198f93e.4f6f5","order":15,"width":"3","height":"1","name":"","label":"Wind Direction","format":"{{msg.payload}}","layout":"row-spread","x":1160,"y":810,"wires":[]},{"id":"7198f93e.4f6f5","type":"ui_group","z":"","name":"Ashfield weather","tab":"de0f6b36.132fa8","order":1,"disp":true,"width":"6","collapse":false},{"id":"de0f6b36.132fa8","type":"ui_tab","z":"","name":"Weather","icon":"dashboard","order":27,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 October 2020 06:38 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/2 "2020-10-26T06:38:05Z")

</div>

The set of material-design icons what is included to dashboard is not full set. Let's call it the offline set.  
If you are using your setup with internet connection available, you can include more like this:

```auto
[{"id":"1f979a65.0feef6","type":"ui_text","z":"e84eac3f.4c039","group":"93fae10c.09faa","order":4,"width":5,"height":1,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-center","x":470,"y":720,"wires":[]},{"id":"4d88f08a.ae2f7","type":"ui_template","z":"e84eac3f.4c039","group":"93fae10c.09faa","name":"","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":380,"y":660,"wires":[[]]},{"id":"76470286.d11d7c","type":"inject","z":"e84eac3f.4c039","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"<span class=\"material-icons\">south_east</span>","payloadType":"str","x":330,"y":720,"wires":[["1f979a65.0feef6"]]},{"id":"93fae10c.09faa","type":"ui_group","z":"","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"9","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

And there is more instructions how to get icons for different situations.

> **[Material Icons Guide - Google Design](http://google.github.io/material-design-icons/#getting-icons)**

And then make corrections in your function node. You have slight mess with `<i>` and `<span>` tags.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [30 October 2020 08:45 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/3 "2020-10-30T08:45:55Z")

</div>

Sorry, but I am stuck again.

Similar problem and I don't know what I need to do.

I want to use icons from here:

> <https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md>

So using what you showed me with the material design icons, what do I do to get these available too.

I'm guessing the code can go in the same node.  
But I can't work out the _trick_ to doing it.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 October 2020 09:28 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/4 "2020-10-30T09:28:05Z")

</div>

`<i class="wi wi-wu-nt_flurries"></i>`

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 09:00 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/5 "2020-10-31T09:00:09Z")

</div>

Um, _dumb question_, but that isn't working and I was wanting to use more than the `flurries` one.

More like the `night` versions to be different for the `day` ones.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 October 2020 09:23 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/6 "2020-10-31T09:23:45Z")

</div>

Ah ok. To get full set of weather-icons

```auto
[{"id":"958b98d7.3bc0f8","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WEATHER","format":"{{msg.payload}}","layout":"row-left","x":490,"y":440,"wires":[]},{"id":"6be9676a.1ca8a8","type":"ui_template","z":"9038de34.04db3","group":"93fae10c.09faa","name":"","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css\" rel=\"stylesheet\">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":380,"wires":[[]]},{"id":"ff2b2602.9421f8","type":"inject","z":"9038de34.04db3","name":"span","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"<span class=\"wi wi-2x wi-flood\"></span>","payloadType":"str","x":330,"y":440,"wires":[["958b98d7.3bc0f8"]]},{"id":"f91dab3a.dbf978","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WEATHER","format":"{{msg.payload}}","layout":"row-left","x":490,"y":480,"wires":[]},{"id":"5383bc90.754b74","type":"inject","z":"9038de34.04db3","name":"span ","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"<span class=\"wi wi-2x wi-volcano\"></span>","payloadType":"str","x":330,"y":480,"wires":[["f91dab3a.dbf978"]]},{"id":"93fae10c.09faa","type":"ui_group","z":"","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 October 2020 09:44 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/7 "2020-10-31T09:44:22Z")

</div>

But as I see you trying to show wind direction, it can be done with weather-icons-wind with much nicer graphics and with much less coding. And you may get rid of full set of mateial-icons if you like.

```auto
[{"id":"958b98d7.3bc0f8","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WEATHER","format":"{{msg.payload}}","layout":"row-left","x":490,"y":440,"wires":[]},{"id":"6be9676a.1ca8a8","type":"ui_template","z":"9038de34.04db3","group":"93fae10c.09faa","name":"","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons-wind.css\"/>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":380,"wires":[[]]},{"id":"ff2b2602.9421f8","type":"inject","z":"9038de34.04db3","name":"span","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"<span class=\"wi wi-2x wi-flood\"></span>","payloadType":"str","x":330,"y":440,"wires":[["958b98d7.3bc0f8"]]},{"id":"f91dab3a.dbf978","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WEATHER","format":"{{msg.payload}}","layout":"row-left","x":490,"y":480,"wires":[]},{"id":"5383bc90.754b74","type":"inject","z":"9038de34.04db3","name":"span ","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"<span class=\"wi wi-2x wi-volcano\"></span>","payloadType":"str","x":330,"y":480,"wires":[["f91dab3a.dbf978"]]},{"id":"d70e1410.23ec78","type":"function","z":"9038de34.04db3","name":"","func":"\nmsg.payload = '<span class=\"wi wi-2x wi-wind towards-'+msg.payload+'-deg\"></span>'\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":500,"y":560,"wires":[["f98dfe22.a5c3b"]]},{"id":"601ff63f.480228","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":560,"wires":[["72b91e92.4e0d"]]},{"id":"72b91e92.4e0d","type":"random","z":"9038de34.04db3","name":"","low":"1","high":"360","inte":"true","property":"payload","x":340,"y":560,"wires":[["d70e1410.23ec78"]]},{"id":"f98dfe22.a5c3b","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WIND","format":"{{msg.payload}}","layout":"row-left","x":630,"y":560,"wires":[]},{"id":"93fae10c.09faa","type":"ui_group","z":"","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 20:01 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/8 "2020-10-31T20:01:14Z")

</div>

(I've only just got up and had breakfast)

Yeah, thanks.

The wind direction bit is "work in progress". I'm not sure I need/want such accuracy.

This next bit throws a spanner in the works.  
Ok you have given me the link, but that doesn't show me their individual names.

So.... I went off searching.

I have a basic bit of code/flow with an `inject` `change` and they go to a `template` node.  
I put the icon's name in the `change` and press the `inject`.

I then look at the dashboard to see the icon. Or that's the idea.

It isn't working.

I'll have to look at what is going on.

Oh, something else - kind of off topic:  
When I imported that flow, I got a warning about "nodes already exist in the flow".  
Hmmm. Ok.

Opened a new tab and imported. Same error.  
And there were quite a few tabs listed, yet I only imported 5.

Back to the weather icons.

Ok, so just thinking.  
The link in the `template` node you gave me is:

`<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css" rel="stylesheet">`

That is the _minimum_ set. `.min`

I've been using the ones from Paul Reed on his site.  
Though this isn't the same kind of link you gave me.  
`https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md`

Anyway, so I'm not quite getting why it isn't working.

This is the code:

Oh, I have also modified (and put back to the original with no change) I deleted the `.min` to maybe point to the complete set of icons. Sorry, just in case.....

No difference. Doesn't work either way.

```auto
[{"id":"51fd0507.98a774","type":"inject","z":"e43e3902.57c4e8","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":3050,"wires":[["17de4414.091dcc"]]},{"id":"17de4414.091dcc","type":"change","z":"e43e3902.57c4e8","name":"Night rain","rules":[{"t":"set","p":"payload","pt":"msg","to":"<i class=\"wi-night-alt-cloudy\"></i>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":3050,"wires":[["530b398c.0b0738"]]},{"id":"530b398c.0b0738","type":"ui_template","z":"e43e3902.57c4e8","group":"5ed75eac.331a3","name":"","order":12,"width":3,"height":2,"format":"\n<div style=\"font-size: 48px;\"\n ng-bind-html=\"msg.payload\">\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":620,"y":3050,"wires":[[]]},{"id":"918e7bfc.d5a75","type":"inject","z":"e43e3902.57c4e8","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":3100,"wires":[["ff9a9b79.3aa198"]]},{"id":"ff9a9b79.3aa198","type":"change","z":"e43e3902.57c4e8","name":"Night rain","rules":[{"t":"set","p":"payload","pt":"msg","to":"<i class=\"wi-wu-nt_rain\"></i>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":3100,"wires":[["73da0eff.5b571"]]},{"id":"73da0eff.5b571","type":"ui_template","z":"e43e3902.57c4e8","group":"5ed75eac.331a3","name":"","order":12,"width":3,"height":2,"format":"\n<div style=\"font-size: 48px;\"\n ng-bind-html=\"msg.payload\">\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":620,"y":3100,"wires":[[]]},{"id":"b21e2569.ef1118","type":"ui_template","z":"e43e3902.57c4e8","group":"93fae10c.09faa","name":"","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.css\" rel=\"stylesheet\">\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":420,"y":3140,"wires":[[]]},{"id":"5ed75eac.331a3","type":"ui_group","name":"Group 2","tab":"c7a5e8aa.a9df28","order":1,"disp":true,"width":"15","collapse":true},{"id":"93fae10c.09faa","type":"ui_group","name":"Default2","tab":"273de47d.2d2bac","order":2,"disp":true,"width":"9","collapse":false},{"id":"c7a5e8aa.a9df28","type":"ui_tab","name":"Weather","icon":"dashboard","order":4,"disabled":false,"hidden":false},{"id":"273de47d.2d2bac","type":"ui_tab","name":"TEST","icon":"dashboard","order":13,"disabled":false,"hidden":false}]

```

Looking more at the link:  
`https://cdnjs.com/libraries/weather-icons`  
I see there is this `woff` thing.

I went through a similar thing with an LCD node a while back and I have this:

```auto
me@me-desktop:~/.node-red/public/myfonts$ ls
DSEG14Modern-Italic.woff DSEG7Modern-Italic.woff
DSEG7Modern-BoldItalic.woff DSEGWeather.woff
me@me-desktop:~/.node-red/public/myfonts$ ^C

```

So..... Can I download that `woff` thing and have them local?

Just asking.

In the mean time:  
I'll try to work out why this isn't working as is.

Oh, just to (maybe) save you more time and me not bothering you more.

The output of the openweathermap node... has a field with the name `icon`.  
In an example I got `11d` shown to me.

Looking at the site I am using, there is no such beast. But there will/should be.

That's probably something I need to as the node makers - yes?  
Just then it may save me a lot of messing around decoding the output as much as I am and greatly simplify the flow.

On the icon: `11`... What ever. I'm guessing _thunderstorm_ and `d` for `day`. I don't know.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 October 2020 20:39 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/9 "2020-10-31T20:39:28Z")

</div>

> **[Weather Icons - 222 font icons inspired by Font Awesome and designed for...](https://erikflowers.github.io/weather-icons/)**

  
And you are missing the class wi

```auto
<i class="wi wi-night-alt-cloudy"></i>

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 20:41 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/10 "2020-10-31T20:41:05Z")

</div>

Yeah, silly me.

Thanks.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 October 2020 21:07 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/11 "2020-10-31T21:07:49Z")

</div>

> [@Trying\_to\_learn](#):
>
> The wind direction bit is "work in progress". I'm not sure I need/want such accuracy.

You have no need to do it. There is node for that. [node-red-contrib-compass (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-compass)

```auto
[{"id":"d70e1410.23ec78","type":"function","z":"9038de34.04db3","name":"","func":"\nmsg.payload = String.raw`<span class=\"wi wi-5x wi-wind towards-${msg.payload}-deg\"></span>`;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":680,"y":560,"wires":[["f98dfe22.a5c3b"]],"info":"Incoming payload treated as wind direction in degrees. It should be number between 0 - 360.\n\nOugoing payload is string containing html span tag with choosed directional weather-icon for wind and additional classes to adjust icon appearance. \n`<span class=\"wi wi-5x wi-wind towards-63-deg\"></span>`"},{"id":"601ff63f.480228","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":560,"wires":[["72b91e92.4e0d"]]},{"id":"72b91e92.4e0d","type":"random","z":"9038de34.04db3","name":"","low":"1","high":"360","inte":"true","property":"payload","x":340,"y":560,"wires":[["d70e1410.23ec78","23f75a15.fca426"]]},{"id":"f98dfe22.a5c3b","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":"2","name":"","label":"WIND DEGREE","format":"{{msg.payload}}","layout":"col-center","x":880,"y":560,"wires":[]},{"id":"23f75a15.fca426","type":"compass-point","z":"9038de34.04db3","direction":"toCompass","subset":"secondary","language":"en","inputField":"payload","outputField":"payload","name":"","x":520,"y":620,"wires":[["d53abbb0.f0efb8"]]},{"id":"d53abbb0.f0efb8","type":"function","z":"9038de34.04db3","name":"","func":"\nmsg.payload.icon = String.raw`<span class=\"wi wi-5x wi-wind wi-towards-${msg.payload.direction.toLowerCase()}\"></span>`;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":680,"y":620,"wires":[["972dd83d.ec5668"]],"info":"Incoming payload treated as wind direction in degrees. It should be number between 0 - 360.\n\nOugoing payload is string containing html span tag with choosed directional weather-icon for wind and additional classes to adjust icon appearance. \n`<span class=\"wi wi-5x wi-wind towards-63-deg\"></span>`"},{"id":"972dd83d.ec5668","type":"ui_template","z":"9038de34.04db3","group":"93fae10c.09faa","name":"","order":12,"width":"4","height":"5","format":"<div style=\"font-size: 16px; text-align: center; overflow:hidden\"\n ng-bind-html=\"msg.payload.description\">\n</div>\n<div style=\"font-size: 48px; text-align: center; overflow:hidden\"\n ng-bind-html=\"msg.payload.icon\">\n</div>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":820,"y":620,"wires":[[]]},{"id":"93fae10c.09faa","type":"ui_group","z":"","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 21:09 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/12 "2020-10-31T21:09:46Z")

</div>

I haven't got that far yet. I am having fun with the weather and mixing the cloud and wind parts now.

I just put the wind thing in at that time as a case of an exercise.

But thanks.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 23:08 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/13 "2020-10-31T23:08:16Z")

</div>

I quickly looked.

Yes it would work in that it would give me the SW,SE, etc output, but I got _smart_ and also added the arrow part just to try it out.

Thanks though.

---

<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 November 2020 23:08 UTC](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/14 "2020-11-14T23:08:17Z")

</div>

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