# Impossible to change color icon inconify

**URL:** https://discourse.nodered.org/t/impossible-to-change-color-icon-inconify/36386
**Category:** Dashboard
**Created:** [23 November 2020 10:07 UTC](https://discourse.nodered.org/t/impossible-to-change-color-icon-inconify/36386 "2020-11-23T10:07:49Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![roro50](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@roro50](https://discourse.nodered.org/u/roro50)
#### Post date: [23 November 2020 10:07 UTC](https://discourse.nodered.org/t/impossible-to-change-color-icon-inconify/36386/1 "2020-11-23T10:07:49Z")

</div>

I apologize for calling on your knowledge once again:  
here it is: I loaded this example of green apple icon, but when I try I have an apple of color of the "title" at the top of the band of node red is petrol blue. yet the color is specified in the script? No matter how much I change, it doesn't change anything.  
where can it come from? thank you

```auto
[
    {
        "id": "5d7e2e4c.5ef6b",
        "type": "ui_template",
        "z": "4ab3cb90.f07ccc",
        "group": "11d854fd.c64afb",
        "name": "icon image",
        "order": 1,
        "width": "2",
        "height": "2",
        "format": "<iconify-icon data-icon=\"mdi:food-apple\" style=\"font-size: 64px; color: #3C8A3F;\"></iconify-icon>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "x": 310,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "11d854fd.c64afb",
        "type": "ui_group",
        "z": "",
        "name": "heure",
        "tab": "9f36b601.175468",
        "order": 1,
        "disp": false,
        "width": 25,
        "collapse": false
    },
    {
        "id": "9f36b601.175468",
        "type": "ui_tab",
        "z": "",
        "name": "Station Météo",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<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 2020 10:47 UTC](https://discourse.nodered.org/t/impossible-to-change-color-icon-inconify/36386/2 "2020-11-23T10:47:41Z")

</div>

Thing is, the element where color needs to be changed is the `<path>` in svg icon. And there is dashboard default which affects in the way  
`.nr-dashboard-theme .nr-dashboard-template path { fill: #09771b; }`

But you can make your own rule for icon

```auto
<iconify-icon id="myIcon" data-icon="mdi:food-apple" style="font-size: 64px;"></iconify-icon>
<style>
    #myIcon > path{
        fill: red;
    }
</style>

```

---

<div class="post-metadata">

### Author: ![roro50](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@roro50](https://discourse.nodered.org/u/roro50)
#### Post date: [23 November 2020 10:58 UTC](https://discourse.nodered.org/t/impossible-to-change-color-icon-inconify/36386/3 "2020-11-23T10:58:54Z")

</div>

ok is GOOD ! !

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [23 November 2020 12:17 UTC](https://discourse.nodered.org/t/impossible-to-change-color-icon-inconify/36386/4 "2020-11-23T12:17:29Z")

</div>

Or slightly less complicated you can use the Dashboard SIte tab to set  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/2098db678977c7cef9ffd60a7b0df2db7876a077.jpeg)

which turn off the Node-RED theme just in templates so then you are ok...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/695978aa19eaec29e91f60e1a30b5b85403ecdda.png)

---

<div class="post-metadata">

### Author: ![roro50](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@roro50](https://discourse.nodered.org/u/roro50)
#### Post date: [23 November 2020 13:10 UTC](https://discourse.nodered.org/t/impossible-to-change-color-icon-inconify/36386/5 "2020-11-23T13:10:24Z")

</div>

thank you all!  
without you, I will not succeed!

---

<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: [23 December 2020 13:10 UTC](https://discourse.nodered.org/t/impossible-to-change-color-icon-inconify/36386/6 "2020-12-23T13:10:33Z")

</div>

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