# Ui-list icon colour

**URL:** <https://discourse.nodered.org/t/ui-list-icon-colour/83784>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [17 December 2023 16:59 UTC](https://discourse.nodered.org/t/ui-list-icon-colour/83784 "2023-12-17T16:59:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![novski](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/novski/32/23243_2.png) [@novski](https://discourse.nodered.org/u/novski)\
**Post date:** [17 December 2023 16:59 UTC](https://discourse.nodered.org/t/ui-list-icon-colour/83784/1 "2023-12-17T16:59:23Z")

</div>

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](https://github.com/node-red/node-red-ui-nodes/tree/master/node-red-node-ui-list) node?

this is an example payload:

```auto
[
    {
        "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...

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [17 December 2023 19:14 UTC](https://discourse.nodered.org/t/ui-list-icon-colour/83784/2 "2023-12-17T19:14:11Z")

</div>

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"

---

<div class="post-metadata">

**Author:** ![novski](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/novski/32/23243_2.png) [@novski](https://discourse.nodered.org/u/novski)\
**Post date:** [17 December 2023 19:54 UTC](https://discourse.nodered.org/t/ui-list-icon-colour/83784/3 "2023-12-17T19:54:39Z")

</div>

if I set the value of `md-icon aria-label style="color: #red;"` to red it makes what i want:  
 ![Bildschirmfoto 2023-12-17 um 20.52.51](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d054d4137af77e8d1131b3397d7adf714f0fe91b.png)

but putting that in to the icon\_name field does just write it to the line as text.  
 ![Bildschirmfoto 2023-12-17 um 20.59.28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f7e199f14a9c364cb21203507ecd5d7cf45a57ac.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [17 December 2023 20:21 UTC](https://discourse.nodered.org/t/ui-list-icon-colour/83784/4 "2023-12-17T20:21:40Z")

</div>

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.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/ab998b5eb43f6768fde4324fb769840ddfc54614.png)

Something like

```auto
<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

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

```

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [17 December 2023 20:33 UTC](https://discourse.nodered.org/t/ui-list-icon-colour/83784/5 "2023-12-17T20:33:38Z")

</div>

> [@novski](#):
>
> putting that in to the icon\_name field does just write it to the line as text.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/37b1aa3b3d4f82e419e19bbb194c808973ec1331.png)

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

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

```

Now you have a class "makeitred" to style

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

```

---

<div class="post-metadata">

**Author:** ![novski](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/novski/32/23243_2.png) [@novski](https://discourse.nodered.org/u/novski)\
**Post date:** [17 December 2023 20:36 UTC](https://discourse.nodered.org/t/ui-list-icon-colour/83784/6 "2023-12-17T20:36:29Z")

</div>

> [@jbudd](#):
>
> ```auto
> .makeitred {
> color: red;
> }
> 
> ```

wow that is great! thanks a lot!

---

<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:** [31 December 2023 20:36 UTC](https://discourse.nodered.org/t/ui-list-icon-colour/83784/7 "2023-12-31T20:36:40Z")

</div>

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