Material Design Icons

[martyouel]

Hi,
I am trying to make a nodered dashboard to use it on my wallpanel tablet and to manage my HomeAssistant entities.

My concern is the icons available. Right now, I want an icon for my garage door button. In the preloaded icons of nodered i didn't find a garage door icon.

So, my question, is there a possibility to load the MDI librairy (materialdesignicons.com) ?

thanks in advance

[dceejay]

they are already... eg see info for button

Currently we include material-design-icons-iconfont @ 6.1.0

[martyouel]

thanks for your answer.
I do not really understand how all the "icon package" work.
My focus was on trying to get this icon : https://materialdesignicons.com/icon/garage
So I tried mi-garage but that do not work.
Is it possible that just the icon made by "Google" are included in NodeRed ?
Is there a way to import independent icon ?

[dceejay]

the built in ones are https://jossef.github.io/material-design-icons-iconfont/

You can also you iconify icons that then gets them from the web - eg

[{"id":"f011384e.a5c978","type":"ui_button","z":"e9b4dddd.70115","name":"","group":"463fb27.9c2064c","order":3,"width":0,"height":0,"passthru":false,"label":"Garage","tooltip":"","color":"","bgcolor":"","icon":"iconify-mdi:garage-variant","payload":"","payloadType":"str","topic":"","x":360,"y":480,"wires":[[]]},{"id":"91c1c10a.8715","type":"ui_template","z":"e9b4dddd.70115","group":"caea69a6.a956a8","name":"","order":4,"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":180,"y":480,"wires":[[]]},{"id":"463fb27.9c2064c","type":"ui_group","name":"test","tab":"cc2c465a.11e6d","order":1,"disp":true,"width":"8","collapse":false},{"id":"caea69a6.a956a8","type":"ui_group","name":"camAlerte","tab":"250de740.57ee78","order":10,"disp":true,"width":"6","collapse":true},{"id":"cc2c465a.11e6d","type":"ui_tab","name":"test","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"250de740.57ee78","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

gives

but note this will only load them from online so your browser needs to see the web at all times.
See https://iconify.design/ for more.

[martyouel]

Oh thanks dceejay.

The first step is done, I can now have my garage door button.

Now I face a new problem ; the icon is pretty small, not really useful with this size. Unlike FA, I can't add an attribute to get bigger icon.

I read, on another thread, that you did hack something to be able to increase the size ? Is there any simple way, for a newbie, to get it work ?
thanks,

[dceejay]

Cant think of a way with the existing code - but I have just pushed a fix to master not yet on npm) that lets you add a second parameter to the iconify font to set the size eg

iconify-mdi:garage-variant 2em or 4em (or 48px etc) so ends up like