Material Design Icons

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 ( ?

thanks in advance

they are already... eg see info for button


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

thanks for your answer.
I do not really understand how all the "icon package" work.
My focus was on trying to get this icon :
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 ?

the built in ones are

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=\"\"></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}]


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


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 ?

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

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