# Iconify icon as button icon

**URL:** <https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225>\
**Category:** Dashboard\
**Created:** [26 August 2021 17:36 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225 "2021-08-26T17:36:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [26 August 2021 17:36 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/1 "2021-08-26T17:36:48Z")

</div>

I have put

```auto
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

```

into head section, but I cannot figure out what to put in the button setup for the icon field to use this -

```auto
<span class="iconify" data-icon="simple-icons:sky"></span>

```

Any ideas please ?

---

<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:** [26 August 2021 17:46 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/2 "2021-08-26T17:46:24Z")

</div>

Syntax for button's Icon field:  
For example the home icon from "dashicons" [admin home • Dashicons • Iconify](https://icon-sets.iconify.design/dashicons/admin-home/)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad3a4693a0825e08f573f202ce7e12abc18dea64.png)

Also the iconify is now some version steps up.

```auto
<script src="https://code.iconify.design/2/2.0.3/iconify.min.js"></script>

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [26 August 2021 17:57 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/3 "2021-08-26T17:57:08Z")

</div>

Thanks I have update head section and used iconify-simple-icons:sky  
and this now works. Is there an easy way to change size please ?

---

<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:** [26 August 2021 18:05 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/4 "2021-08-26T18:05:21Z")

</div>

There is easiest way in the world 🙂

```auto
iconify-dashicons:admin-home 48px

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [26 August 2021 18:16 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/5 "2021-08-26T18:16:27Z")

</div>

Thanks,

Sorry if I’m asking dumb questions but I couldn’t find relevant NR information on this subject.

At least this post will help others like me 😉

---

<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:** [26 August 2021 18:23 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/6 "2021-08-26T18:23:53Z")

</div>

It is not dumb question. As the dashboard is just a bunch of nodes but 1 person as maintainer it is not possible to have every corner covered in help files. But luckily there is common place for every node - the github page, where Readme covers most of basics.  
Known that such idea can't be figured out by regular user but that's where the community works out best.

> **[GitHub - node-red/node-red-dashboard: A dashboard UI for Node-RED](https://github.com/node-red/node-red-dashboard#icons)**
>
> A dashboard UI for Node-RED. Contribute to node-red/node-red-dashboard development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [27 August 2021 01:00 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/7 "2021-08-27T01:00:27Z")

</div>

Hi, I spoke too soon.

Using the new iconify script is ok if used as an icon button node, but no longer works in text node label.  
I note the format is different with new version, but even after updating my text nodes the icons do not display.

```auto
<script src="https://code.iconify.design/2/2.0.3/iconify.min.js"></script>
<span class="iconify" data-icon="fa-solid:hot-tub"></span>

```

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

The old syntax only works with the old script and not the new, so I cannot use the updated version, not sure what benefits it offers ?

```auto
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<span class="iconify icon:fa-solid:hot-tub"></span>

```

---

<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:** [27 August 2021 04:21 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/8 "2021-08-27T04:21:07Z")

</div>

No I dont know exactly. I haven't tried with text node. Sure if it does not work, the old script should be used. With old syntax.

---

<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:** [10 September 2021 04:21 UTC](https://discourse.nodered.org/t/iconify-icon-as-button-icon/50225/9 "2021-09-10T04:21:54Z")

</div>

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