Size of Material-Icon (node-text)

[pietrofduarte]

Hi everyone I am try increase the size of material-icon usinge the node text.
This is the flow. What is the options? With fontawesome is more easy, but I need
a different icon that just in material-icon exist.

1. Valuet format: <font color={{msg.payload}}><i class="fa fa-5x fa-male"></i></font>

2. Valuet format: <font color={{msg.payload}}><i class="material-icons"> router</i>

The full code is:

[{"id":"21033a6.7ebd0c6","type":"tab","label":"Switch","disabled":false,"info":""},{"id":"7e990cd.b3b83f4","type":"ui_text","z":"21033a6.7ebd0c6","group":"93fae10c.09faa","order":3,"width":3,"height":3,"name":"","label":"","format":"<font color={{msg.payload}}><i class=\"fa fa-5x fa-male\"></i></font>","layout":"col-center","x":490,"y":120,"wires":[]},{"id":"4e7b767c.3688e8","type":"inject","z":"21033a6.7ebd0c6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":140,"wires":[["1ea896fe.740269"]]},{"id":"f83816f3.408898","type":"inject","z":"21033a6.7ebd0c6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":150,"y":180,"wires":[["1ea896fe.740269"]]},{"id":"1ea896fe.740269","type":"change","z":"21033a6.7ebd0c6","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"true","fromt":"bool","to":"green","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"false","fromt":"bool","to":"gray","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":160,"wires":[["7e990cd.b3b83f4","7aeff285.caed5c"]]},{"id":"7aeff285.caed5c","type":"ui_text","z":"21033a6.7ebd0c6","group":"93fae10c.09faa","order":1,"width":3,"height":3,"name":"","label":"","format":"<font color={{msg.payload}}><i class=\"material-icons\"> router</i>","layout":"col-center","x":490,"y":200,"wires":[]},{"id":"93fae10c.09faa","type":"ui_group","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"9","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"Switch","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

Picture:

[hotNipi]

Make custom class for icon size adjustment. Use ui_template to add it to site head.
Add that class to the icon and voila.

[{"id":"7e990cd.b3b83f4","type":"ui_text","z":"21033a6.7ebd0c6","group":"93fae10c.09faa","order":3,"width":3,"height":3,"name":"","label":"","format":"<font color={{msg.payload}}><i class=\"fa fa-5x fa-male\"></i></font>","layout":"col-center","x":490,"y":120,"wires":[]},{"id":"4e7b767c.3688e8","type":"inject","z":"21033a6.7ebd0c6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":140,"wires":[["1ea896fe.740269"]]},{"id":"f83816f3.408898","type":"inject","z":"21033a6.7ebd0c6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":150,"y":180,"wires":[["1ea896fe.740269"]]},{"id":"1ea896fe.740269","type":"change","z":"21033a6.7ebd0c6","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"true","fromt":"bool","to":"green","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"false","fromt":"bool","to":"gray","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":160,"wires":[["7e990cd.b3b83f4","7aeff285.caed5c"]]},{"id":"7aeff285.caed5c","type":"ui_text","z":"21033a6.7ebd0c6","group":"93fae10c.09faa","order":1,"width":3,"height":3,"name":"","label":"","format":"<font color={{msg.payload}}><i class=\"material-icons bigIcon\"> router</i>","layout":"col-center","x":490,"y":200,"wires":[]},{"id":"524176e0.1ae9f8","type":"ui_template","z":"21033a6.7ebd0c6","group":"99609e7b.c8ed4","name":"","order":4,"width":0,"height":0,"format":"<style>\n    .bigIcon{\n        font-size:80px;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":270,"y":300,"wires":[[]]},{"id":"93fae10c.09faa","type":"ui_group","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"9","collapse":false},{"id":"99609e7b.c8ed4","type":"ui_group","name":"GAUGE INPUT SELECTOR","tab":"c38fb46f.de97f8","order":1,"disp":true,"width":8,"collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"Switch","icon":"dashboard","order":3,"disabled":false,"hidden":false},{"id":"c38fb46f.de97f8","type":"ui_tab","name":"Controls","icon":"dashboard","disabled":false,"hidden":false}]

[pietrofduarte]

@hotNipi you are great, always in stand-by !!!!!!

[pietrofduarte]

@hotNipi how are you?

1 - For any reason that I don't know the icon back to the original size (small).
The unique think that I do was change de color of theme / dashboard (just this).
2 - Do you know another different words (bigIcon) to resize the icon? "material-icons bigIcon"

[hotNipi]

It is just a name of the class you create. You can name it as you like. It is simple class to adjust any text to have font size 80px. The usage in ui_text widget is simple html where for icon element is defined list of classes <i class="material-icons bigIcon"> 2 classes in this case. material-icons and bigIcon.

The ui_template, where that class is defined must be configured like this

Mostly if changing styles for html page does not work, it takes to debug that page with developer tools. Inspecting elements and their styles. Hard to say anything without seeing behind the scenes.

[pietrofduarte]

Ok, I will try.
More one time, thank's.

[pietrofduarte]

In time:

[{"id":"57add5c4.1c9ccc","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"e413ba00.58d788","type":"ui_text","z":"57add5c4.1c9ccc","group":"ea1c04a1.f51148","order":1,"width":6,"height":1,"name":"","label":"Roteador","format":"<i class=\"material-icons bigIcon\"> router</i>","layout":"row-spread","x":800,"y":120,"wires":[]},{"id":"3947e4de.aef2fc","type":"change","z":"57add5c4.1c9ccc","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"true","fromt":"bool","to":"black","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"false","fromt":"bool","to":"green","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":140,"wires":[["f5d37a51.18c0d8","432248c2.143e58"]]},{"id":"f5d37a51.18c0d8","type":"ui_text","z":"57add5c4.1c9ccc","group":"ea1c04a1.f51148","order":2,"width":6,"height":2,"name":"","label":"Roteador","format":"<i class=\"material-icons bigIcon\"> router</i>","layout":"row-spread","x":660,"y":180,"wires":[]},{"id":"432248c2.143e58","type":"template","z":"57add5c4.1c9ccc","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n .bigIcon{\n font-size:80px;\n }\n</style>","output":"str","x":660,"y":120,"wires":[["e413ba00.58d788"]]},{"id":"ea1c04a1.f51148","type":"ui_group","name":"Conexão","tab":"b1ab5f32.33e4d8","order":1,"disp":true,"width":"6","collapse":false},{"id":"b1ab5f32.33e4d8","type":"ui_tab","name":"triumph","icon":"dashboard","disabled":false,"hidden":false}]

[hotNipi]

I think I know the reason.
If I shared the flow I did it quickly and didn't pay attention where I situated the ui_template with styles. It was exported as part of "controls" tab and "gauge input selector" group.
For you those probably are garbage and you deleted them I'd guess. So the ui_template with styles may be deleted.

[hotNipi]

No, not the template node, but ui_template node. And you don't need to connect it to anything.

[pietrofduarte]

@hotNipi now I understand. I creat a new container node-red (docker) e put only ui_template with styles and ui_text with 2 injects and change nodes.

After a configuration of ui_template, success. Now I will back to another container and find if exist another flow/nodes that possibly are in conflict.

But now the way are clear. Thanks more one time.