# Font Awesome Icon working while Angular Material Icon not

**URL:** <https://discourse.nodered.org/t/font-awesome-icon-working-while-angular-material-icon-not/35344>\
**Category:** Dashboard\
**Created:** [4 November 2020 21:41 UTC](https://discourse.nodered.org/t/font-awesome-icon-working-while-angular-material-icon-not/35344 "2020-11-04T21:41:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [4 November 2020 21:41 UTC](https://discourse.nodered.org/t/font-awesome-icon-working-while-angular-material-icon-not/35344/1 "2020-11-04T21:41:17Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/acf39caf27d2d2731b1401bc8fb8e79c44ec83a7.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/5366a1576be5872d8afaac8b50b5bfe5c8f2ed68.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c81e25d2960d9935c32eb2e00917c1fd754fa688.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/92ce0311733545dcbb9cccf271a41a3806db150a.png)

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

Some ideas @dceejay ?

---

<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:** [4 November 2020 21:51 UTC](https://discourse.nodered.org/t/font-awesome-icon-working-while-angular-material-icon-not/35344/2 "2020-11-04T21:51:45Z")

</div>

Try this

```auto
<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.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [5 November 2020 12:50 UTC](https://discourse.nodered.org/t/font-awesome-icon-working-while-angular-material-icon-not/35344/3 "2020-11-05T12:50:38Z")

</div>

> [@hotNipi](#):
>
> `material-icons `

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

`signal_cellular_4_bar` ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c5f58a5c296687264a5f6e338b6dc3a67452789e.png) working while `signal_cellular_3_bar` does not work ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/74f3cd066bf9a2c42adf539c086fe7dba28f7276.png)🤨

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

---

<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:** [5 November 2020 14:20 UTC](https://discourse.nodered.org/t/font-awesome-icon-working-while-angular-material-icon-not/35344/4 "2020-11-05T14:20:01Z")

</div>

May be then with use of the ui\_template

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

```

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [5 November 2020 16:48 UTC](https://discourse.nodered.org/t/font-awesome-icon-working-while-angular-material-icon-not/35344/5 "2020-11-05T16:48:38Z")

</div>

cool, I should be okay with this.  
One note: Node RED doesn't like red:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/9929de5357ecaf97c26391b2c55751e147491cd2.png) there is like a ghost  
while the blue yes lol :  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/43aa8a80b5dd33523913e79d6c02269d9376b140.png)

---

<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:** [19 November 2020 16:48 UTC](https://discourse.nodered.org/t/font-awesome-icon-working-while-angular-material-icon-not/35344/6 "2020-11-19T16:48:44Z")

</div>

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