# Add icon in treeview parent

**URL:** <https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [12 July 2024 14:53 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449 "2024-07-12T14:53:52Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [12 July 2024 14:53 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/1 "2024-07-12T14:53:52Z")

</div>

Hello,

how to add icon in treeview parent? Example from vuetify  
[https://play.vuetifyjs.com/#eNqtVcGOmzAQ/RWXC7vSmpx6QdlUK3WPVaVek6hybMN6Y2wEJksU8e8dmwB2ljSNVA6A37x5M/bMwPoU1RVdvJRlcmh4lEZLw4tSEsNXG4XQ8oBNxflB8A+7ROiAC824fN5EFt9EPZoK8KoBdM8R1SVXnFlYCSOIlMefgAxmy8V7fgS7IsWoRagRB2LITvIesCpYK0yloHsLucwgtyFTSKqW2qRlxYFq452c+JNzRd0mOnu4/QiqFXiIDHhfLC3JBISaOAidTr3nNxQXTOBMS8YrbKEYpT4Wo64bpRe99kwsLmu+sqo2Ur0eg27B/dJvuQgLANahAgAEVljWtBKlcUzelroyiPGMNNKgUy/H4CRT9PCInlfo4YzB0fv1SNE6LpsdnG68fRoYLtN0ULHXmynkefOSqLwhOccW+xqPTgi9g4+jKOiS9zo0aQjljBSM2K59e8Eu1QtS7Zn+CFgly4YKQIYYlnin24Chcp8hCpDy7aY1vp1p2hRcGawbI4UKqK0ctuOovKVcTvZufLMFglOcTs+NASBeS02vwBdGgkOc5ML48SbFKw72VH/DADZQnLscz/X1aAjRNyFZ5ervwxcKvkptiLlU+avSrJqvKHWuE6jYZ82hCW3y83Z/0/01FWCecXVjGTnYEUzg9jnS9Sz+WV8oxtvETstV+TljqO/v7mbBbWuJXOkqaOgxGgzBXf2zIzsuEziiTORJONejZgjfbklC9zCaoBZ+Bzy90HBT8dfry/cfr0nBZuVC+KYY/A3/736PpFKJ1HR/X0GGqneP7gV+N8vF+NWPuifVSOlu2z+3dRlB](https://play.vuetifyjs.com/#eNqtVcGOmzAQ/RWXC7vSmpx6QdlUK3WPVaVek6hybMN6Y2wEJksU8e8dmwB2ljSNVA6A37x5M/bMwPoU1RVdvJRlcmh4lEZLw4tSEsNXG4XQ8oBNxflB8A+7ROiAC824fN5EFt9EPZoK8KoBdM8R1SVXnFlYCSOIlMefgAxmy8V7fgS7IsWoRagRB2LITvIesCpYK0yloHsLucwgtyFTSKqW2qRlxYFq452c+JNzRd0mOnu4/QiqFXiIDHhfLC3JBISaOAidTr3nNxQXTOBMS8YrbKEYpT4Wo64bpRe99kwsLmu+sqo2Ur0eg27B/dJvuQgLANahAgAEVljWtBKlcUzelroyiPGMNNKgUy/H4CRT9PCInlfo4YzB0fv1SNE6LpsdnG68fRoYLtN0ULHXmynkefOSqLwhOccW+xqPTgi9g4+jKOiS9zo0aQjljBSM2K59e8Eu1QtS7Zn+CFgly4YKQIYYlnin24Chcp8hCpDy7aY1vp1p2hRcGawbI4UKqK0ctuOovKVcTvZufLMFglOcTs+NASBeS02vwBdGgkOc5ML48SbFKw72VH/DADZQnLscz/X1aAjRNyFZ5ervwxcKvkptiLlU+avSrJqvKHWuE6jYZ82hCW3y83Z/0/01FWCecXVjGTnYEUzg9jnS9Sz+WV8oxtvETstV+TljqO/v7mbBbWuJXOkqaOgxGgzBXf2zIzsuEziiTORJONejZgjfbklC9zCaoBZ+Bzy90HBT8dfry/cfr0nBZuVC+KYY/A3/736PpFKJ1HR/X0GGqneP7gV+N8vF+NWPuifVSOlu2z+3dRlB)

straight forward approach doesn't work

```auto
{
          title: 'public',
          file: 'png',
          children: [
            {...

```

I would like to be able to add icon like shown in here:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8de85f3f0e358265c9488af11d7ddf4d49a72866.png)

> **[Building a Treeview component (Part III)](https://medium.com/vuetify/building-a-treeview-component-part-iii-2dabdfd6f0cd)**
>
> In this article we continue describing development of a new Vuetify component for treeview. If you haven’t already, you can read Part I…

@joepavitt could you assist?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 July 2024 08:45 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/2 "2024-07-16T08:45:46Z")

</div>

> [@KarolisL](#):
>
> straight forward approach doesn't work

Not sure what you mean here? The code sample you have shared should just work out of the box?

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [16 July 2024 08:59 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/3 "2024-07-16T08:59:17Z")

</div>

I just really thought it would work, because it works for non extendable children. But once you have children icon is not added

BTW Thanks for taking a look into this

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [16 July 2024 09:07 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/4 "2024-07-16T09:07:04Z")

</div>

I get the same thing in Dashboard2 or in the vuetiply play:

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

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [16 July 2024 09:19 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/5 "2024-07-16T09:19:28Z")

</div>

Is this dashboard1 on the right?

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [16 July 2024 09:23 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/6 "2024-07-16T09:23:43Z")

</div>

It is Dashboard 2, just copied the contents to a ui-template.

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [16 July 2024 09:40 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/7 "2024-07-16T09:40:02Z")

</div>

My bad, I assumed dashboard template stuff matches vuetify playground and didn't even test it on dashboard... Thanks a lot

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [16 July 2024 12:26 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/8 "2024-07-16T12:26:09Z")

</div>

I'm posting end result for future references

```auto
[{"id":"18ee4dcafdd7896a","type":"inject","z":"d3d8a490d0e9960a","name":"Test1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"title\":\"validation1\",\"file\":\"pass\"},{\"title\":\"validation2\",\"file\":\"fail\"},{\"title\":\"validation3\",\"file\":\"fail\",\"children\":[{\"title\":\"subValidation1\",\"file\":\"pass\",\"children\":[{\"title\":\"subSubValidation1\",\"file\":\"pass\"}]},{\"title\":\"subValidation2\",\"file\":\"fail\"},{\"title\":\"subValidation3\",\"file\":\"pass\"}]}]","payloadType":"json","x":530,"y":220,"wires":[["962ae7d8f077d06f","e5afadfb2ca1937c"]]},{"id":"0523073782752587","type":"inject","z":"d3d8a490d0e9960a","name":"Test2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"title\":\"validation1\",\"file\":\"pass\"},{\"title\":\"validation2\",\"file\":\"pass\"},{\"title\":\"validation3\",\"file\":\"pass\",\"children\":[{\"title\":\"subValidation1\",\"file\":\"pass\",\"children\":[{\"title\":\"subSubValidation1\",\"file\":\"pass\"}]},{\"title\":\"subValidation2\",\"file\":\"pass\"},{\"title\":\"subValidation3\",\"file\":\"pass\"}]}]","payloadType":"json","x":530,"y":280,"wires":[["962ae7d8f077d06f","e5afadfb2ca1937c"]]},{"id":"e5afadfb2ca1937c","type":"ui-template","z":"d3d8a490d0e9960a","group":"5d8b6aa7ab10b2e3","page":"","ui":"","name":"validation3","order":3,"width":"5","height":"1","head":"","format":"<template>\n <div>\n <v-treeview\n :items=\"items\"\n :open.sync=\"initiallyOpen\"\n activatable\n item-key=\"title\"\n >\n <template v-slot:prepend=\"{ item }\">\n <v-icon :style=\"{ color: getColor(item.file) }\">{{ getIcon(item.file) }}</v-icon>\n </template>\n </v-treeview>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n initiallyOpen: ['public'],\n files: {\n pass: 'mdi-check-circle',\n fail: 'mdi-alpha-x-box'\n },\n iconSelect: 'pass',\n tree: [],\n items: [\n {\n title: 'validation1',\n file: 'pass',\n },\n {\n title: 'validation2',\n file: 'fail',\n },\n {\n title: 'validation3',\n file: 'fail',\n children: [\n {\n title: 'subValidation1',\n file: 'pass',\n children: [\n {\n title: 'subSubValidation1',\n file: 'pass',\n },\n],\n },\n {\n title: 'subValidation2',\n file: 'fail',\n },\n {\n title: 'subValidation3',\n file: 'pass',\n },\n ],\n }\n ],\n }),\n\n methods: {\n getIcon(file) {\n return this.files[file];\n },\n getColor(file) {\n if (file === 'pass') {\n return 'green';\n } else if (file === 'fail') {\n return 'red';\n } else {\n return 'black'; // default color\n }\n }\n },\n\n watch: {\n msg: function(){\n const statIcon = this.msg.payload\n this.items = statIcon\n }\n }\n }\n</script>\n\n<style>\n /* Add any additional styles here if needed */\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":930,"y":240,"wires":[[]]},{"id":"5d8b6aa7ab10b2e3","type":"ui-group","name":"Validation","page":"7bc2300bd082d6d4","width":"12","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"7bc2300bd082d6d4","type":"ui-page","name":"Hikvision","ui":"65cf368b48fdb5f6","path":"/Hikvision","icon":"camera","layout":"grid","theme":"d1f899a55e3aa9ab","order":3,"className":"","visible":"true","disabled":"false"},{"id":"65cf368b48fdb5f6","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"d1f899a55e3aa9ab","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

I'm struggling to joing 2 elements in a template. I would like to make each of the items as dialog button. So I would be able to report why did it fail. Everything would come preformatted by msg

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

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [25 July 2024 06:22 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/9 "2024-07-25T06:22:32Z")

</div>

After updating D2 to version 1.13 (I guess my previous version was 1.10), template shows treeview with missing icons for slots with children:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0e335fd7e6c49ff5ab2bd12b8079cb55d00f304c.png)

So I think the issue is vuetify components itself, but I don't know what was the difference between releases

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 July 2024 06:47 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/10 "2024-07-25T06:47:56Z")

</div>

We did do a version update for Vuetify, so that could be a problem. Have a look at Vuetify's bugs/issues to see if its been reported

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [25 July 2024 06:58 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/11 "2024-07-25T06:58:35Z")

</div>

It has been reported and been resolved

> <https://github.com/vuetifyjs/vuetify/issues/20009>
>
> \### Environment
> \*\*Vuetify Version:\*\* 3.6.9
> \*\*Vue Version:\*\* 3.4.27
> \*\*Browsers…:\*\* Chrome 125.0.0.0
> \*\*OS:\*\* Windows 10
> 
> \### Steps to reproduce
> 1. Create a VTreeview node.
> 2. Make the VTreeview activatable
> 3. Add a template using the append or prepend slots
> 4. In the template, insert a node
> 
> The node will not be visible in parent nodes on the tree. It will be visible for child nodes.
> 
> 
> \### Expected Behavior
> The nodes append and prepend to parent nodes in the tree.
> 
> \### Actual Behavior
> The nodes do not append or prepend to parent nodes in the tree.
> 
> \### Reproduction Link
> \[https://play.vuetifyjs.com/#...\](https://play.vuetifyjs.com/#eNqNVEFu6yAQvcrIm7RS7az+xkoj/RP0AE0XBIhLiwHZY9dV5Lt3oCbGqVOVBYZ5b94Mw+Dnc9Y2fPvfuaLvZFZmO5S10wzl/mAAdn2OjZS9kh9QKoLax0MWvocMGEfVM2RH/U0menSGPm+1xdI10kkjyOkM3g3GQzZxg7ji1uyhFio/2voIu+1kmuS2y2QIjdmQYYHStuWNchiYcnC2QRDyxDqNcP6WE5RrCXf38LiHu8kGoIxCxbT+fKJMS3jeuO6oFd+8PETGSWnZllHFj1esdQkbn7dmpupYJXNv+7e5OAG8kU+gGCvkW7uELIUKICcw9/sUr8W1es2ad2E/FiwnThPNZ5jTlqo4LBimShmqJqkUxwFTXFje1dJgbjvUyiyog47HCVQ5cKlnfLys/AVRFefqhW4hyyyVFJL4CjU5xKonEQH4q9KiCbeSmq8UUpUWGV6r/Kq0qpYqalvZgur4UzO2hk9+HZ+rEsdclnXGzYOdWO8fRkHTz0i3s/izvjJCDoXv4Zvya+BSPz1diqxeeFHRu6uMbRZtdolGrZnaZ7kYZLwPi9H/CC5PPxsfTKd1mF6+APHDULA=)
> 
> \### Other comments
> Note, using selected instead of activatable works fine. Using neither selected nor activatable also works fine.

raised a new issue

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 July 2024 07:03 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/12 "2024-07-25T07:03:33Z")

</div>

Thanks, in that case, suggests we just need another version bump of Vuetify.

We are on 3.6.9 at the moment, will check what this ended up getting bundled into

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [25 July 2024 07:08 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/13 "2024-07-25T07:08:19Z")

</div>

No it been closed, but seems to be raised multiple times. Seems to be in the plans for 3.7 version

> **[v3.7.0 (Odyssey) Milestone · vuetifyjs/vuetify](https://github.com/vuetifyjs/vuetify/milestone/73)**
>
> 🐉 Vue Component Framework. Contribute to vuetifyjs/vuetify development by creating an account on GitHub.

---

<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:** [8 August 2024 07:08 UTC](https://discourse.nodered.org/t/add-icon-in-treeview-parent/89449/14 "2024-08-08T07:08:38Z")

</div>

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