### Author:  [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)
#### Post date: [9 July 2018 23:57 UTC](https://discourse.nodered.org/t/if-statement-ui-template/1471/1 "2018-07-09T23:57:17Z")
Hello - I've been dinking around with an if statement in the ui template for several days now and haven't been able to figure it out.
I'm trying to load an svg file base on the msg.payload from the darksky node.
For example, if the msg.payload is partly-cloudy-day I want to load a svg titled partly-cloudy-day.svg, if the msg.payload is fog load fog-1.svg and so on. I made the changes required to setting.js httpStatic: 'C:\Users\unpue\public', I serve a background picture with this setup so I know it works.
I can open the link to the svg file on Chrome by looking it up like this
[http://192.168.2.xxx:1880//weather-icons/weather/partly-cloudy-day.svg](http://192.168.2.xxx:1880//weather-icons/weather/partly-cloudy-day.svg)
This is the flow
and here what I have in the template node, I removed the first \ ng-if= "msg.payload === partly-cloudy-day"
img src="/weather-icons/weather/partly-cloudy-day.svg"
ng-if="msg.payload === sunny"
img src="/weather-icons/weather/day.svg"
```
this is what the msg.payload looks like
Appreciate the help!
---
### Author:  [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [10 July 2018 18:55 UTC](https://discourse.nodered.org/t/if-statement-ui-template/1471/2 "2018-07-10T18:55:45Z")
Whenever you want to post a block of code, paste it between two lines that contain only three backtics, such as ````` -- otherwise any html or svg elements may be rendered into the page. (If you edit your post and add those lines, you'll see what I mean and make it easier for us to read...)
As for the angular syntax, you need to compare the `msg.payload` string to another javascript string, when you use the 3 equal signs. Since you left the right side of the equation as a bare keyword, i think it's trying to interpret things like `fog` as a variable. Try this:
```auto
```
Another less verbose technique would be to use a `change` or `function` node ahead of this `ui_template` node, adding another field (e.g "msg.icon"), and then substituting that directly into your img src attribute, like so:
`
`
_(at least I believe that syntax is correct -- ymmv)_
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 July 2018 22:06 UTC](https://discourse.nodered.org/t/if-statement-ui-template/1471/3 "2018-07-10T22:06:15Z")
Note we do include @rossoreed s weather-icons-lite built into dashboard, so wi prefix should make them available like fa icons
---
### Author:  [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)
#### Post date: [10 July 2018 22:21 UTC](https://discourse.nodered.org/t/if-statement-ui-template/1471/4 "2018-07-10T22:21:03Z")
> [@shrickus](#):
>
> paste it between two lines that contain only three backtics
@shrickus, thank you for the tip on the backtics, I was clearly using them incorrectly. I will give your changes a try and report back.
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [10 July 2018 23:17 UTC](https://discourse.nodered.org/t/if-statement-ui-template/1471/5 "2018-07-10T23:17:39Z")
> [@dceejay](#):
>
> weather-icons
Awesome ! There are a tons of weather icons ! Thanks for sharing Dave.
Adding links for more information:
[https://erikflowers.github.io/weather-icons/](https://erikflowers.github.io/weather-icons/)
> **[GitHub - Paul-Reed/weather-icons: Node-red weather icons](https://github.com/Paul-Reed/weather-icons)**
>
> Node-red weather icons. Contribute to Paul-Reed/weather-icons development by creating an account on GitHub.
---
### Author:  [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)
#### Post date: [11 July 2018 01:30 UTC](https://discourse.nodered.org/t/if-statement-ui-template/1471/6 "2018-07-11T01:30:15Z")
> [@dceejay](#):
>
> Note we do include @rossoreed s weather-icons-lite built into dashboard, so wi prefix should make them available like fa icons
Thank you @dceejay I looked at them before and was inspired to place animated ones to bring life into the alarm panel I'm working on. I downloaded these from [amcharts.com](https://www.amcharts.com/free-animated-svg-weather-icons/) I'm using them with the script @shrickus corrected for me. Right now I have just one setup, as the weather conditions change the animated icon changes as well, next sets are to figure out how to show a 3 days forecast in a table, might be back asking for help on that one too, but I am learning. You can see the animation on this screenshot.
