# Add Iconify icons to text node

**URL:** <https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657>\
**Category:** Dashboard\
**Created:** [15 March 2021 08:33 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657 "2021-03-15T08:33:23Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rguita](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rguita](https://discourse.nodered.org/u/rguita)\
**Post date:** [15 March 2021 08:33 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/1 "2021-03-15T08:33:23Z")

</div>

Hi all,

I would like very much to add an Icon from the Iconify library to my Dashboard. After reading one article of the forum ([node-red-dashboard (node) - Node-RED](https://flows.nodered.org/node/node-red-dashboard)), I understood that this would be possible without downloading the icon. I tried a couple of way, but had never luck with it.

Can somebody help me with this one?

```auto
[{"id":"d3db1225.c2061","type":"ui_template","z":"4b50b591.978cdc","group":"305b1dd2.6231e2","name":"","order":1,"width":0,"height":0,"format":"<script src=\"https://code.iconify.design/2/2.0.0-rc.6/iconify.min.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":400,"y":180,"wires":[[]]},{"id":"f90166c3.1c1898","type":"ui_text","z":"4b50b591.978cdc","group":"305b1dd2.6231e2","order":0,"width":0,"height":0,"name":"","label":"","format":"test<span class=\"iconify\" data-icon=\"iconify-fa-solid:home\"></span>","layout":"row-spread","x":690,"y":260,"wires":[]},{"id":"55c89a90.8a0924","type":"inject","z":"4b50b591.978cdc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":280,"wires":[["f90166c3.1c1898"]]},{"id":"305b1dd2.6231e2","type":"ui_group","name":"Meteo","tab":"ac1ee624.cac818","order":2,"disp":true,"width":"6","collapse":false},{"id":"ac1ee624.cac818","type":"ui_tab","name":"Exterior","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

Thanks,

Ricardo

---

<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:** [15 March 2021 08:45 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/2 "2021-03-15T08:45:39Z")

</div>

You wrote `<span class="iconify" data-icon="iconify-fa-solid:home"></span>`

Try `<span class="iconify" data-icon="fa-solid:home"></span>` instead.

---

<div class="post-metadata">

**Author:** ![rguita](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rguita](https://discourse.nodered.org/u/rguita)\
**Post date:** [15 March 2021 08:49 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/3 "2021-03-15T08:49:23Z")

</div>

Hi Steve,

Thanks for your quick reply,

unfortunately didn't work.

I'm getting crazy with this.

regards,

Ricardo Guita

---

<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:** [15 March 2021 08:58 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/4 "2021-03-15T08:58:41Z")

</div>

Maybe it is because you are using `https://code.iconify.design/2/2.0.0-rc.6/iconify.min.js` instead of `https://code.iconify.design/1/1.0.7/iconify.min.js`?

PS, i think you might have been correct and actually do need the `iconify-` prefix (some kinda workaround for dashboard) so try the 1.0.7 URL with `<span class="iconify" data-icon="iconify-fa-solid:home"></span>`

Also, as a sanity check, try `Home: <span class="iconify" data-icon="iconify-fa-solid:home"></span>` in a ui\_template as well

---

<div class="post-metadata">

**Author:** ![rguita](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rguita](https://discourse.nodered.org/u/rguita)\
**Post date:** [15 March 2021 09:03 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/5 "2021-03-15T09:03:31Z")

</div>

```auto
[{"id":"d3db1225.c2061","type":"ui_template","z":"4b50b591.978cdc","group":"305b1dd2.6231e2","name":"","order":1,"width":0,"height":0,"format":"<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":400,"y":180,"wires":[[]]},{"id":"f90166c3.1c1898","type":"ui_text","z":"4b50b591.978cdc","group":"305b1dd2.6231e2","order":0,"width":0,"height":0,"name":"","label":"","format":"test<span class=\"iconify\" data-icon=\"iconify-fa-solid:home\"></span>","layout":"row-spread","x":690,"y":260,"wires":[]},{"id":"55c89a90.8a0924","type":"inject","z":"4b50b591.978cdc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":280,"wires":[["f90166c3.1c1898"]]},{"id":"305b1dd2.6231e2","type":"ui_group","name":"Meteo","tab":"ac1ee624.cac818","order":2,"disp":true,"width":"6","collapse":false},{"id":"ac1ee624.cac818","type":"ui_tab","name":"Exterior","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

Had tried the 1.0.7 version also before, no luck ☹

What do you mean with " Also, as a sanity check, try `Home: <span class="iconify" data-icon="iconify-fa-solid:home"></span>` in a ui\_template as well"

thanks

---

<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:** [15 March 2021 11:54 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/6 "2021-03-15T11:54:48Z")

</div>

It seems like the `data-icon` part never reaches the DOM (`ngSanitizer` maybe?) The `iconify` scripts scans the DOM for data-icon and if not found, the replacement can't just happen.

Tried with `ui_template` - you can write static span and it works but you can't use `ng-bind-html`.

---

<div class="post-metadata">

**Author:** ![rguita](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rguita](https://discourse.nodered.org/u/rguita)\
**Post date:** [15 March 2021 11:57 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/7 "2021-03-15T11:57:11Z")

</div>

Thanks for your reply,  
Got the solution already after 4 hours trying ☹

`<span class="iconify icon:wi:sunset icon-inline:false"></span>`  
instead of  
`<span class="iconify" data-icon="iconify-fa-solid:home"></span>`

Anyway thanks,

---

<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 March 2021 10:22 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/8 "2021-03-16T10:22:39Z")

</div>

thanks - I will update readme to include this example.

---

<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:** [30 March 2021 10:23 UTC](https://discourse.nodered.org/t/add-iconify-icons-to-text-node/42657/9 "2021-03-30T10:23:28Z")

</div>

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