How to use iconify with dashboard 2 template node

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

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 not enough?

The template node (as with most of the dashboard nodes) uses vuetify whose documentation is extensive & almost every component has multiple examples.

Also, the ui-template documentation is fairly thorough with examples.

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

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

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.

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

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

@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


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

directly in the template - you can get that in all the icon sets 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.

1 Like

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

Thank you

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