# How to use iconify with dashboard 2 template node

**URL:** <https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, docker, dashboard-2\
**Created:** [25 October 2024 14:27 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669 "2024-10-25T14:27:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [25 October 2024 14:27 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669/1 "2024-10-25T14:27:10Z")

</div>

I am trying to implement iconify but I don't know where to begin I use vuetify.js for template node

Any idea where to start.

My setup is node-red installed on docker and dashboard 2 palette

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 October 2024 14:46 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669/2 "2024-10-25T14:46:52Z")

</div>

> [@xlameee](#):
>
> implement iconify

What do you mean by "implement iconify"

Do you simply want to use 1 or 2 of the icons?

Are the built in [MDI icons](https://pictogrammers.github.io/@mdi/font/7.4.47/#:~:text=mdi%2Dzigbee-,Extras,-The%20helper%20CSS) not enough?

> [@xlameee](#):
>
> I don't know where to begin I use vuetify.js for template node

The template node (as with most of the dashboard nodes) uses [`vuetify`](https://vuetifyjs.com/en/components/checkboxes/#usage) whose documentation is extensive & almost every component has multiple examples.

Also, the [ui-template documentation](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html) is fairly thorough with examples.

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [25 October 2024 18:15 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669/3 "2024-10-25T18:15:36Z")

</div>

> [@Steve-Mcl](#):
>
> What do you mean by "implement iconify"
> 
> Do you simply want to use 1 or 2 of the icons?
> 
> Are the built in [MDI icons](https://pictogrammers.github.io/@mdi/font/7.4.47/#:~:text=mdi%2Dzigbee-,Extras,-The%20helper%20CSS) not enough?

Well put it this way more then enough I had no idea that they are so many  
I was looking at the wrong documentation 😀 😀 😀 😀

But I still want to learn how to implement iconify or any other in node-red if you don't mind

If I understood anything from that documentation for ui-template I wouldn't be asking here

---

<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:** [25 October 2024 18:31 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669/4 "2024-10-25T18:31:13Z")

</div>

Maybe this way then..  
To use iconify icons instead of MDI icons inside any of dashboard widgets - not possible.  
To use iconify icons inside ui-template - possible in many ways, one easier than other.

But it depends what you are building so hard to advise anything. Custom things as the ui-template is just have too wide options.

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [25 October 2024 20:11 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669/5 "2024-10-25T20:11:16Z")

</div>

You could start with the easier methods I use ui-template only

> [@hotNipi](#):
>
> But it depends what you are building so hard to advise anything.

Does it really matter I just want to learn how to do it. That's more important then what!! Don't you think? If you need an idea for yourself, you will not find it with newbie like me.

If you are not helpful I suggest you look elsewhere and let me be

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 October 2024 21:12 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669/6 "2024-10-25T21:12:45Z")

</div>

@xlameee your request, about using iconify inside a template node will involve either setting up a static share (to host the necessary files) OR using a CDN.

Once your template has access to the necessary JS and/or CSS it you will be able to use it as per the library instructions.

If you search this forum you will find a few examples where folk have imported amcharts or chartjs into a ui-template using a CDN. Also, the official docs also have an example here: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#loading-external-dependencies)

* * *

If your immediate requirements are specifically about choosing a hand full of the iconify icons, you could always just use the SVG they provide:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/6437197468ca080811f4deb3ab3892258b45d76b.png) directly in the template - you can get that in all the [icon sets](https://icon-sets.iconify.design/) they have.

If instead, you are trying to learn general web dev - this is not _really_ the right place TBH, but there are tonnes of excellent materials out there - just know this, for the dashboard 2.0, look at learning about VUE v3 and Vuetify and importing libraries will be made via the example doc i posted above.

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [26 October 2024 02:45 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669/7 "2024-10-26T02:45:39Z")

</div>

That's all I needed some jump start to get started

Thank you

---

<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:** [9 November 2024 02:46 UTC](https://discourse.nodered.org/t/how-to-use-iconify-with-dashboard-2-template-node/92669/8 "2024-11-09T02:46:08Z")

</div>

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