Font Awesome Icon working while Angular Material Icon not

[SuperNinja]

[{"id":"458a1df8.34c844","type":"ui_text","z":"fe2c7bc6.bd49c8","group":"22cd2b36.d63984","order":7,"width":"3","height":"2","name":"text+Icon ","label":"<font color=orange>Signal : </font>","format":"<h1><font color={{msg.color}}>{{msg.icon}}</font></h1>","layout":"row-left","x":1430,"y":1070,"wires":[],"info":"<font color=blue ></font>\n\n<h1><font color={{msg.color}} ><i class=\"fa fa-life-ring\" style=\"font-size:24px;\"></i></font></h1>\n\n<h1><font color={{msg.color}}>{{msg.icon}}</font></h1>"},{"id":"3e2a1dd6.5b1152","type":"inject","z":"fe2c7bc6.bd49c8","name":"<p class=\"fa fa-signal\"></p>","props":[{"p":"icon","v":"<p class=\"fa fa-signal\"></p>","vt":"str"},{"p":"color","v":"lime","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1180,"y":1110,"wires":[["458a1df8.34c844"]]},{"id":"91edad58.5edae","type":"comment","z":"fe2c7bc6.bd49c8","name":"angular material not working !","info":"les icones Font Awsome marchent , mais pas les angular !!","x":1170,"y":1010,"wires":[]},{"id":"86fa1c41.f814d","type":"inject","z":"fe2c7bc6.bd49c8","name":"<p class=\"network_cell\"></p>","props":[{"p":"icon","v":"<p class=\"network_cell\"></p>","vt":"str"},{"p":"color","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1180,"y":1040,"wires":[["458a1df8.34c844"]]},{"id":"5425fbad.6a6264","type":"comment","z":"fe2c7bc6.bd49c8","name":"Font awsome good !","info":"les icones Font Awsome marchent , mais pas les angular !!","x":1140,"y":1080,"wires":[]},{"id":"80520541.9816f8","type":"inject","z":"fe2c7bc6.bd49c8","name":"<i class=\"wi wi-darksky-thunderstorm\"></i>","props":[{"p":"icon","v":"<i class=\"wi wi-darksky-thunderstorm\"></i>","vt":"str"},{"p":"color","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1220,"y":1170,"wires":[["458a1df8.34c844"]]},{"id":"bac3eb71.428a98","type":"comment","z":"fe2c7bc6.bd49c8","name":"Weather icon good !","info":"les icones Font Awsome marchent , mais pas les angular !!","x":1140,"y":1140,"wires":[]},{"id":"22cd2b36.d63984","type":"ui_group","name":"maison","tab":"8402418e.d5d13","order":2,"disp":true,"width":"10","collapse":true},{"id":"8402418e.d5d13","type":"ui_tab","name":"ESP12","icon":"home","order":12,"disabled":false,"hidden":false}]

I'm trying to display an icon in a ui_text node. The problem I encounter is that only Font awsome icons or Weather Icon works while Angular material doesn't !?
(even if i add 'mi-' before the icon name)

I don't have this problem in ui_Button where the Angular Material icon is working.

Some ideas @dceejay ?

[hotNipi]

Try this

<p class="material-icons network_cell"></p>

The button actually uses 'angular-material' icon and creates svg icon.
With text widget I don't know if it is even possible to force same usecase.

[SuperNinja]

@hotNipi

material-icons

@hotNipi thank you for this good answer. However, I note that some icons are not displayed:

signal_cellular_4_bar working while signal_cellular_3_bar does not work

Do you have another tip for me?
The goal is to display the reception level of wireless nodes, maybe another compatible Fonts icons?

[hotNipi]

May be then with use of the ui_template

[{"id":"861c1cf7.ec1cd","type":"ui_template","z":"9038de34.04db3","group":"22cd2b36.d63984","name":"","order":3,"width":"3","height":"1","format":"<style>\n        span.iconspan * > path{\n        fill:#FFFFFF \n    }\n    span.iconspan.red * > path{\n         fill:#FF0000\n    }\n</style>\n\n<div>Signal:<span class=\"iconspan red\"><ng-md-icon icon=\"signal_cellular_3_bar\" size=\"24\"></ng-md-icon></span></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":900,"y":220,"wires":[[]]},{"id":"22cd2b36.d63984","type":"ui_group","name":"maison","tab":"8402418e.d5d13","order":2,"disp":true,"width":"10","collapse":true},{"id":"8402418e.d5d13","type":"ui_tab","name":"ESP12","icon":"home","order":12,"disabled":false,"hidden":false}]

[SuperNinja]

cool, I should be okay with this.
One note: Node RED doesn't like red:
there is like a ghost
while the blue yes lol :