# Change Title color to group Header . Dashboard

**URL:** https://discourse.nodered.org/t/change-title-color-to-group-header-dashboard/96830
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [30 April 2025 13:51 UTC](https://discourse.nodered.org/t/change-title-color-to-group-header-dashboard/96830 "2025-04-30T13:51:21Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Viriato](https://avatars.discourse-cdn.com/v4/letter/v/f07891/32.png) [@Viriato](https://discourse.nodered.org/u/Viriato)
#### Post date: [30 April 2025 13:51 UTC](https://discourse.nodered.org/t/change-title-color-to-group-header-dashboard/96830/1 "2025-04-30T13:51:22Z")

</div>

Continuing the discussion from [How to add icon to card header. Dashboard 2](https://discourse.nodered.org/t/how-to-add-icon-to-card-header-dashboard-2/93731/3):

Can we change also the color of the group Title ?

Thanks

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [30 April 2025 21:55 UTC](https://discourse.nodered.org/t/change-title-color-to-group-header-dashboard/96830/2 "2025-04-30T21:55:11Z")

</div>

```auto
/* define any styles here - supports raw CSS */
    .v-card-title {
        color: red;
    }

```

---

<div class="post-metadata">

### Author: ![Viriato](https://avatars.discourse-cdn.com/v4/letter/v/f07891/32.png) [@Viriato](https://discourse.nodered.org/u/Viriato)
#### Post date: [1 May 2025 07:09 UTC](https://discourse.nodered.org/t/change-title-color-to-group-header-dashboard/96830/3 "2025-05-01T07:09:33Z")

</div>

Great it works

what about the icon color ?

Thanks a lot

* * *

Done !!!  
found the tip ..

Thanks

---

<div class="post-metadata">

### Author: ![edstobi](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@edstobi](https://discourse.nodered.org/u/edstobi)
#### Post date: [4 May 2025 13:22 UTC](https://discourse.nodered.org/t/change-title-color-to-group-header-dashboard/96830/4 "2025-05-04T13:22:15Z")

</div>

Hello, I am currently rebuilding Dashboard1 into Dashboard2. I have painfully learned that I cannot display colored icons in the text output.

I have found this example here and now I would like to modify it so that:  
a) the icons are displayed in color, and  
b) not as a card header, but as a separate element within the card.

This way, I can use the pictogram to see the current state of various home automation systems at a glance - for example, green means good, red means bad, blue means off, etc.

Can anyone give me some initial guidance on how to achieve this?

```auto
[
    {
        "id": "2be3bc674c163d0b",
        "type": "inject",
        "z": "96021c4f811b5928",
        "name": "",
        "props": [
            {
                "p": "title",
                "v": "Winter",
                "vt": "str"
            },
            {
                "p": "icon",
                "v": "mdi-snowflake-thermometer",
                "vt": "str"
            },
            {
                "p": "color",
                "v": "blue",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 190,
        "y": 60,
        "wires": [
            [
                "de4a108eb3e6cdf6"
            ]
        ]
    },
    {
        "id": "7984f3d787ad6014",
        "type": "inject",
        "z": "96021c4f811b5928",
        "name": "",
        "props": [
            {
                "p": "title",
                "v": "Sommer",
                "vt": "str"
            },
            {
                "p": "icon",
                "v": "mdi-coolant-temperature",
                "vt": "str"
            },
            {
                "p": "color",
                "v": "green",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 190,
        "y": 120,
        "wires": [
            [
                "de4a108eb3e6cdf6"
            ]
        ]
    },
    {
        "id": "de4a108eb3e6cdf6",
        "type": "ui-template",
        "z": "96021c4f811b5928",
        "group": "d0ee23241087db79",
        "page": "",
        "ui": "",
        "name": "Card header icon and title",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <Teleport v-if=\"mounted\" :to=\"target\">\n <div class=\"v-card-item __append\">\n <v-icon aria-hidden=\"false\">{{icon}}</v-icon> \n </div>\n <div class=\"v-card-item__ prepend\">\n <div class=\"v-card-title\">{{title}}</div>\n </div>\n </Teleport>\n</template>\n\n<script>\n export default {\n data() { \n return {\n mounted:false,\n target:\"\",\n icon:\"mdi-account\",\n title:\"Dynamic title\" \n }\n },\n computed: { \n \n },\n watch: {\n msg: function () {\n if(this.msg?.title != undefined){\n this.title = this.msg.title\n }\n if(this.msg?.icon != undefined){\n this.icon = this.msg.icon\n }\n }\n },\n mounted(){ \n this.target = '#nrdb-ui-group-'+this.props.group+' .v-card-item'\n this.mounted = true \n }\n }\n</script>\n<style>\n .hidden-template{\n display:none !important;\n }\n</style>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "hidden-template",
        "x": 490,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "d0ee23241087db79",
        "type": "ui-group",
        "name": "Temperatur",
        "page": "e68fa6b2b27f0ec4",
        "width": "6",
        "height": "1",
        "order": 3,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "e68fa6b2b27f0ec4",
        "type": "ui-page",
        "name": "Teichsteuerung",
        "ui": "f96401822df0a597",
        "path": "/page4",
        "icon": "home",
        "layout": "grid",
        "theme": "e69c750bbe40bb7a",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 7,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "f96401822df0a597",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "e69c750bbe40bb7a",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#eeeeee",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [4 May 2025 14:33 UTC](https://discourse.nodered.org/t/change-title-color-to-group-header-dashboard/96830/5 "2025-05-04T14:33:27Z")

</div>

Try

```auto
<template>
   <Teleport v-if="mounted" :to="target">
        <div class="v-card-item__append">
            <v-icon aria-hidden="false" :color = "iconColour">{{icon}}</v-icon>            
        </div>
        <div class="v-card-item__prepend">
            <div class="v-card-title" >{{title}}</div>
        </div>
   </Teleport>
</template>

<script>
    export default {
        data() {           
            return {
                mounted:false,
                target:"",
                icon:"mdi-account",
                iconColour: 'black',
                title:"Dynamic title"    
            }
        },
        computed: {        
            
        },
        watch: {
            msg: function () {
                if(this.msg?.title != undefined){
                    this.title = this.msg.title
                }
                if(this.msg?.icon != undefined){
                    this.icon = this.msg.icon
                }

                if (this.msg?.color != undefined) {
                    this.iconColour = this.msg.color
                }
            }
        },

        mounted(){            
            this.target = '#nrdb-ui-group-'+this.props.group+' .v-card-item'
            this.mounted = true            
        }
    }
</script>
<style>
    .hidden-template{
        display:none !important;
    }

</style>

```

You can also define various style classes to adjust other attributes of the icon.

---

<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: [3 June 2025 14:34 UTC](https://discourse.nodered.org/t/change-title-color-to-group-header-dashboard/96830/6 "2025-06-03T14:34:28Z")

</div>

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