How to add icon to card header. Dashboard 2

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

[{"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"}}]
1 Like