# Change icon in template with if

**URL:** https://discourse.nodered.org/t/change-icon-in-template-with-if/36679
**Category:** Dashboard
**Created:** [28 November 2020 17:18 UTC](https://discourse.nodered.org/t/change-icon-in-template-with-if/36679 "2020-11-28T17:18:48Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![thomasvjohansen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomasvjohansen/32/32779_2.png) [@thomasvjohansen](https://discourse.nodered.org/u/thomasvjohansen)
#### Post date: [28 November 2020 17:18 UTC](https://discourse.nodered.org/t/change-icon-in-template-with-if/36679/1 "2020-11-28T17:18:48Z")

</div>

I have a msg.payload returning 1 or 0 from a bigtimer node to a ui template node.  
Im trying to show different icon according to 1 and 0.

found a few examples here but either they are way complicated or not complete, and Im new to all this.  
so far Im pieced this together but not working.

```auto
<div ng-bind-html="msg.payload"></div>

<div ng-if="msg.payload === '1'">
<i class="fa fa-lightbulb-on"></i>    
</div>

<div ng-if="msg.payload === '0'">
<i class="fa fa-lightbulb"></i>
</div>

```

any help or complete examples is a appreciated

---

<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: [29 November 2020 10:25 UTC](https://discourse.nodered.org/t/change-icon-in-template-with-if/36679/2 "2020-11-29T10:25:18Z")

</div>

First off, Node-RED uses the FontAwsome version 4.7 icons.

Here is one way you could do it using a switch.

```auto
[{"id":"b7f64ce5.99d33","type":"inject","z":"e77202b8.289f","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":150,"y":280,"wires":[["9ba4c5a1.91243"]]},{"id":"d6bfd886.f36d58","type":"inject","z":"e77202b8.289f","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":150,"y":320,"wires":[["9ba4c5a1.91243"]]},{"id":"9ba4c5a1.91243","type":"ui_switch","z":"e77202b8.289f","name":"","label":"switch","tooltip":"","group":"e2c8d841.7b158","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"1","onvalueType":"num","onicon":"fa-lightbulb-o fa-4x","oncolor":"red","offvalue":"0","offvalueType":"num","officon":"fa-lightbulb-o fa-4x","offcolor":"black","x":330,"y":300,"wires":[[]]},{"id":"e2c8d841.7b158","type":"ui_group","name":"Default","tab":"85c83aff.43db18","order":2,"disp":true,"width":"6","collapse":false},{"id":"85c83aff.43db18","type":"ui_tab","name":"Home","icon":"home","order":1,"disabled":false,"hidden":false}]

```

---

<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: [29 December 2020 10:25 UTC](https://discourse.nodered.org/t/change-icon-in-template-with-if/36679/3 "2020-12-29T10:25:23Z")

</div>

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