Angular icon dynamic fill-color does not work

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

<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:

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

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.

<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:

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

Thank you very much!
IĀ“m very happy.

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

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