# Angular icon dynamic fill-color does not work

**URL:** <https://discourse.nodered.org/t/angular-icon-dynamic-fill-color-does-not-work/71112>\
**Category:** General\
**Created:** [23 November 2022 13:39 UTC](https://discourse.nodered.org/t/angular-icon-dynamic-fill-color-does-not-work/71112 "2022-11-23T13:39:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Unglaublich](https://avatars.discourse-cdn.com/v4/letter/u/439d5e/32.png) [@Unglaublich](https://discourse.nodered.org/u/Unglaublich)\
**Post date:** [23 November 2022 13:39 UTC](https://discourse.nodered.org/t/angular-icon-dynamic-fill-color-does-not-work/71112/1 "2022-11-23T13:39:39Z")

</div>

Hello,

in a node-red template node i would like to change the color of an icon to green when variable is true.  
But it does not work.  
What do I do wrong, please?

Thank you

```auto
<table class="bordered">
    <tr ng-repeat="data in msg.payload">

          <ng-md-icon icon="local_gas_station" style="fill:{{data.isOpen ? 'green' : 'red'}}"></ng-md-icon>
        
        </td>
    </tr>
</table>

```

edit:  
The following also has no effect:

```auto
<ng-md-icon icon="send" style="fill: pink"></ng-md-icon>

```

---

<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:** [23 November 2022 16:15 UTC](https://discourse.nodered.org/t/angular-icon-dynamic-fill-color-does-not-work/71112/2 "2022-11-23T16:15:56Z")

</div>

> [@Unglaublich](#):
>
> `</td>`

This tag is closed but never opened. This way your code doesn't populate an array of rows.  
But anyway - the reason why it does not colorize icons is that the `ui_template` forces a rule to have svg path elements colored with the theme color. As your icons will be svg - the fill you trying to add will get lower specificity so it does not apply.

To make it working you'll need to make styles for every color you'll need.

```auto
<style>
    .icon-red path{
        fill:red !important;
    }
    .icon-green path{
        fill:green !important;
    }
</style>

```

And then use same strategy as before but add correct class to the icon:

```auto
<ng-md-icon icon="local_gas_station" class="{{data.isOpen ? 'icon-green' : 'icon-red'}}"></ng-md-icon>

```

---

<div class="post-metadata">

**Author:** ![Unglaublich](https://avatars.discourse-cdn.com/v4/letter/u/439d5e/32.png) [@Unglaublich](https://discourse.nodered.org/u/Unglaublich)\
**Post date:** [24 November 2022 12:20 UTC](https://discourse.nodered.org/t/angular-icon-dynamic-fill-color-does-not-work/71112/3 "2022-11-24T12:20:16Z")

</div>

Thank you very much!  
I´m very happy.

btw: i simply forgot the opening-"/td" here to post. In my code it is present.

---

<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:** [8 December 2022 12:20 UTC](https://discourse.nodered.org/t/angular-icon-dynamic-fill-color-does-not-work/71112/4 "2022-12-08T12:20:40Z")

</div>

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