# \[Feature Request\] Support for Iconify icon framework

**URL:** <https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754>\
**Category:** Dashboard\
**Created:** [16 May 2020 13:36 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754 "2020-05-16T13:36:38Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![jens\_rossbach](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jens_rossbach/32/98717_2.png) [@jens\_rossbach](https://discourse.nodered.org/u/jens_rossbach)\
**Post date:** [16 May 2020 13:36 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/1 "2020-05-16T13:36:38Z")

</div>

Could you add support for [Iconify](https://iconify.design) icon framework to node-red-dashboard? Currently supported Material Design, Font Awesome 4.7 and Weather icons are quite limited, especially for smart home environment.

---

<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:** [16 May 2020 14:04 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/2 "2020-05-16T14:04:12Z")

</div>

Some nice icons in there. I always found fa 4.7 a bit lacking - don't get me wrong, fa has loads of good stuff but never the one I want. 🤔

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 May 2020 14:45 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/3 "2020-05-16T14:45:44Z")

</div>

To be honest, since you only ever generally need a few icons, i always grab the SVG versions and only include those that I need. No need to have a full library.

---

<div class="post-metadata">

**Author:** ![jens\_rossbach](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jens_rossbach/32/98717_2.png) [@jens\_rossbach](https://discourse.nodered.org/u/jens_rossbach)\
**Post date:** [16 May 2020 15:20 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/4 "2020-05-16T15:20:10Z")

</div>

How do you use arbitrary / custom icons inside dashboard widgets?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 May 2020 17:27 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/5 "2020-05-16T17:27:26Z")

</div>

You can do that through CSS or a ui\_template. You can put static files in the static folder that you can define in the settings.js file.

---

<div class="post-metadata">

**Author:** ![jens\_rossbach](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jens_rossbach/32/98717_2.png) [@jens\_rossbach](https://discourse.nodered.org/u/jens_rossbach)\
**Post date:** [16 May 2020 17:44 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/6 "2020-05-16T17:44:42Z")

</div>

ok, ui\_template I know, but I thought about a possibility for the standard widgets, e.g. the button widget.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 May 2020 18:49 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/7 "2020-05-16T18:49:58Z")

</div>

Try using CSS, you can add backgrounds to elements.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 May 2020 18:52 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/8 "2020-05-16T18:52:34Z")

</div>

All the current ones are part of the dist so will work offline. We can’t add everything.

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [16 May 2020 18:53 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/9 "2020-05-16T18:53:48Z")

</div>

I used the [discription from Paul-Reed](https://github.com/Paul-Reed/weather-icons) about installing weather icons to add [icofont](https://icofont.com/) to my NR installation.  
Read it, maybe it helps you going.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [17 May 2020 09:06 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/10 "2020-05-17T09:06:19Z")

</div>

I've had a poke at this - and it sort of can work - but there doesn't seem to be a nice simple way to change thing like size, and the default seems too small to be useful. (Unlike fa etc where you can just add fa-3x etc)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f12ee1fc599080affc50be4ae1f2a3789fe38b7a.png)

It could be made a fixed larger size but then we start to get alignment problems.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/1570fc55221665028355687c264bef043915b943.png)  
(also for some reason when used with switch it isn't dynamic so only the colour changes.)

---

<div class="post-metadata">

**Author:** ![jens\_rossbach](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jens_rossbach/32/98717_2.png) [@jens\_rossbach](https://discourse.nodered.org/u/jens_rossbach)\
**Post date:** [17 May 2020 09:21 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/11 "2020-05-17T09:21:18Z")

</div>

How did you do this? I was able to integrate Iconify icons on my own into a ui\_template widget, but also had problems with dynamic behavior depending on `msg.payload` for instance.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [17 May 2020 09:35 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/12 "2020-05-17T09:35:18Z")

</div>

well I hacked the source of course 🙂 - I still used a template to load the .js file into head - but hacked the source allow the use of `iconify-` as a keyword to prefix the name of the icon so iconify-mdi:fan etc

PS - you can already (sort of similar to link to Pauls method above) - download the [https://icofont.com/how-to-use](https://icofont.com/how-to-use) file locally if you like and once added to head via a template - use that by the prefix `icofont-`

---

<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:** [16 June 2020 09:58 UTC](https://discourse.nodered.org/t/feature-request-support-for-iconify-icon-framework/26754/14 "2020-06-16T09:58:03Z")

</div>

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