Add Iconify icons to text node

Dashboard
1

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), 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?

[{"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

2

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

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

3

Hi Steve,

Thanks for your quick reply,

unfortunately didn't work.

I'm getting crazy with this.

regards,

Ricardo Guita

4

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

5 
[{"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 :frowning:

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

6

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.

7

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

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

Anyway thanks,

2 Likes
8

thanks - I will update readme to include this example.

9

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