Ui-list icon colour

[novski]

Another icon color question.
I didn't read all, but I read a few of the questions here. There seams to be several ways to solve it.
How can i color a icon inside the ui-list node?

this is an example payload:

[
    {
        "title": "No WiFi Signal",
        "description": "Lost network connection",
        "icon_name": "signal_wifi_0_bar"
    },
    {
        "title": "Weak WiFi Signal",
        "description": "May lose network connection",
        "icon_name": "signal_wifi_2_bar"
    },
    {
        "title": "Strong WiFi Signal",
        "description": "Connected to network",
        "icon_name": "signal_wifi_4_bar"
    }
]

I tried to <font color=red> and several others but nothing works...

[jbudd]

What element is the icon displayed as?

Use your browser tools to inspect the icon to find out.

I don't know and I'm away from my computer but I wouldn't be surprised if the style you need includes."fill"

[novski]

if I set the value of md-icon aria-label style="color: #red;" to red it makes what i want:

but putting that in to the icon_name field does just write it to the line as text.

[jbudd]

You need to use a ui-template to apply CSS styling to the icon. It can be on your editor tab but doesn't need to be wired into the flow.

Something like

<style>
md-icon i {
    color: red;
}
</style>

Note that unlike many dashboard widgets, node-red-node-ui-list has not been updated to include a Class config field. You could ask the maintainers to update it; they are quite active in Node-red

So it's a bit more difficult to limit the scope of your CSS change.

Possibilities are to have the template type "Widget in group" and choose a dashboard group on this dashboard tab.

Alternatively specify the tab in the CSS selector

#Tab_<Name of your tab> md-icon i {

I think this should work for font-awesome icons. Other icons may work differently.

[jbudd]

@novski

putting that in to the icon_name field does just write it to the line as text.

Hmm. It has included "style color = ..." as part of the list of classes.
You could make use of that:

    {
        "title": "No WiFi Signal",
        "description": "Lost network connection",
        "icon_name": "fa-window-close makeitred"
    },

Now you have a class "makeitred" to style

<style>
.makeitred {
    color: red;
}
</style>

[novski]

@jbudd

.makeitred {
    color: red;
}

wow that is great! thanks a lot!