# Size of Material-Icon (node-text)

**URL:** <https://discourse.nodered.org/t/size-of-material-icon-node-text/39189>\
**Category:** Dashboard\
**Created:** [15 January 2021 16:58 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189 "2021-01-15T16:58:00Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![pietrofduarte](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pietrofduarte/32/29882_2.png) [@pietrofduarte](https://discourse.nodered.org/u/pietrofduarte)\
**Post date:** [15 January 2021 16:58 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/1 "2021-01-15T16:58:00Z")

</div>

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:

```auto
[{"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:  
 ![Size](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aa1e3d7e5e4678a2cbb11a207e76aa561f1781c6.png)

---

<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 January 2021 17:44 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/2 "2021-01-15T17:44:11Z")

</div>

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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![pietrofduarte](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pietrofduarte/32/29882_2.png) [@pietrofduarte](https://discourse.nodered.org/u/pietrofduarte)\
**Post date:** [15 January 2021 20:08 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/3 "2021-01-15T20:08:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pietrofduarte](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pietrofduarte/32/29882_2.png) [@pietrofduarte](https://discourse.nodered.org/u/pietrofduarte)\
**Post date:** [18 January 2021 19:45 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/4 "2021-01-18T19:45:59Z")

</div>

@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"

![Roteador](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/e/de67fabb9acd3b82573368270ded1530a7568b93.png)

---

<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:** [18 January 2021 20:02 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/5 "2021-01-18T20:02:59Z")

</div>

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  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e3e2be9234e655d19220cb5bd81ea220d25156d.png)

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.

---

<div class="post-metadata">

**Author:** ![pietrofduarte](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pietrofduarte/32/29882_2.png) [@pietrofduarte](https://discourse.nodered.org/u/pietrofduarte)\
**Post date:** [18 January 2021 20:05 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/6 "2021-01-18T20:05:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pietrofduarte](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pietrofduarte/32/29882_2.png) [@pietrofduarte](https://discourse.nodered.org/u/pietrofduarte)\
**Post date:** [18 January 2021 20:24 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/7 "2021-01-18T20:24:08Z")

</div>

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}]`

---

<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:** [18 January 2021 20:27 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/8 "2021-01-18T20:27:39Z")

</div>

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.

---

<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:** [18 January 2021 20:33 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/9 "2021-01-18T20:33:17Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c255cef81aace5eb067d150a64d7678ef9e47c00.png)

---

<div class="post-metadata">

**Author:** ![pietrofduarte](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pietrofduarte/32/29882_2.png) [@pietrofduarte](https://discourse.nodered.org/u/pietrofduarte)\
**Post date:** [20 January 2021 12:57 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/10 "2021-01-20T12:57:43Z")

</div>

@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.

 ![Node-Red](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93e89ac1e4271f9c01a35ac61e2d0cfc5ee28fb7.jpeg)

---

<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:** [3 February 2021 12:57 UTC](https://discourse.nodered.org/t/size-of-material-icon-node-text/39189/11 "2021-02-03T12:57:46Z")

</div>

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