# How to add icon to card header. Dashboard 2

**URL:** https://discourse.nodered.org/t/how-to-add-icon-to-card-header-dashboard-2/93731
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [6 December 2024 11:06 UTC](https://discourse.nodered.org/t/how-to-add-icon-to-card-header-dashboard-2/93731 "2024-12-06T11:06:50Z")
**Posts on this page:** 5
**Page:** 1

<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: [6 December 2024 11:06 UTC](https://discourse.nodered.org/t/how-to-add-icon-to-card-header-dashboard-2/93731/1 "2024-12-06T11:06:50Z")

</div>

I was asked privately but I tend to share ...  
The actual case was a bit more advanced but definitely for dedicated build so I do share basics only.  
Key point was that icon should be dynamically controllable in may ways ...

```auto
[{"id":"ab1a416038dfd420","type":"ui-template","z":"50af7128c761b2cb","group":"4190965f220f9afd","page":"","ui":"","name":"Card header icon","order":6,"width":0,"height":0,"head":"","format":"<template>\n <Teleport v-if=\"mounted\" :to=\"target\">\n <div :class=\"positionClass\">\n <v-icon aria-hidden=\"false\">{{icon}}</v-icon>\n </div>\n </Teleport>\n</template>\n\n<script>\n export default {\n data() { \n return {\n mounted:false,\n target:\"\",\n position:\"right\",//\"left\"\n icon:\"mdi-account\" \n }\n },\n computed: { \n positionClass: function () {\n return this.position == \"left\" ? \"v-card-item __prepend\" : \"v-card-item__ append\"\n }\n },\n watch: {\n msg: function () {\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":630,"y":540,"wires":[[]]},{"id":"4190965f220f9afd","type":"ui-group","name":"Test Group","page":"b55c3e3640901741","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"b55c3e3640901741","type":"ui-page","name":"Test Page","ui":"cab2761fcbe60245","path":"/test","icon":"home","layout":"grid","theme":"0819910104699eae","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":4,"className":"","visible":"true","disabled":"false"},{"id":"cab2761fcbe60245","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-template"],"showPathInSidebar":false,"showPageTitle":false,"navigationStyle":"temporary","titleBarStyle":"fixed"},{"id":"0819910104699eae","type":"ui-theme","name":"Site Dark","colors":{"surface":"#141414","primary":"#32a00a","bgPage":"#121212","groupBg":"#141414","groupOutline":"#333333"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"12px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [11 December 2024 03:38 UTC](https://discourse.nodered.org/t/how-to-add-icon-to-card-header-dashboard-2/93731/2 "2024-12-11T03:38:16Z")

</div>

Works great .. thank you for that inspiration 🙂

@hotNipi Any advise on how to get the Group-Title Changed / Amended ?

---

<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: [11 December 2024 09:59 UTC](https://discourse.nodered.org/t/how-to-add-icon-to-card-header-dashboard-2/93731/3 "2024-12-11T09:59:36Z")

</div>

By using same strategy...  
The default group title is required but an empty space is does the trick to get rid of it.

```auto
[{"id":"ab1a416038dfd420","type":"ui-template","z":"a5b9f027282f32b3","group":"4190965f220f9afd","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":690,"y":580,"wires":[[]]},{"id":"2be3bc674c163d0b","type":"inject","z":"a5b9f027282f32b3","name":"","props":[{"p":"title","v":"Account Check","vt":"str"},{"p":"icon","v":"mdi-account-check","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":470,"y":540,"wires":[["ab1a416038dfd420"]]},{"id":"7984f3d787ad6014","type":"inject","z":"a5b9f027282f32b3","name":"","props":[{"p":"title","v":"Account Cancel","vt":"str"},{"p":"icon","v":"mdi-account-cancel","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":470,"y":600,"wires":[["ab1a416038dfd420"]]},{"id":"4190965f220f9afd","type":"ui-group","name":" ","page":"b55c3e3640901741","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"b55c3e3640901741","type":"ui-page","name":"Test Page","ui":"29792df7d7b05e2e","path":"/test","icon":"home","layout":"grid","theme":"0819910104699eae","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":5,"className":"","visible":"true","disabled":"false"},{"id":"29792df7d7b05e2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":[],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0819910104699eae","type":"ui-theme","name":"Site Dark","colors":{"surface":"#141414","primary":"#32a00a","bgPage":"#121212","groupBg":"#141414","groupOutline":"#333333"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"12px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [11 December 2024 22:33 UTC](https://discourse.nodered.org/t/how-to-add-icon-to-card-header-dashboard-2/93731/4 "2024-12-11T22:33:07Z")

</div>

Yeah, I was able to add a title in 'Append" and 'Prepend' section but not to modify the existing title ☹

So the solution is 🙂

- default group title ='' during design phase
- use your code to publish any group title/icon dynamiclly

👍👍👍 already integrated into my light status 🙂

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

---

<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: [10 January 2025 22:34 UTC](https://discourse.nodered.org/t/how-to-add-icon-to-card-header-dashboard-2/93731/5 "2025-01-10T22:34:06Z")

</div>

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