Beginner--Icon issue

Dashboard
1

When I use the following tag in a text node I get a carriage return before and after the icon.

"i class="material-icons">water-percent"

I do have the beginning bracket removed it so it would post in message.
Can some one tell me what I am doing wrong?
Thanks in advance for the time and help.

2

Welcome to forum.
The code is not something you can share as text But luckily there is options to do it correctly.
To share the code correctly, press this button and paste your code where it says:

image
image823×195 12.3 KB

3

Thanks Here is the code I am using.

<i class="material-icons">water-percent</i>
4

Cool.
You said the you have the icon presented but not correctly. I cant see even that result. And that is because of the water-percent icon is not part of the set of icons provided by node red dashboard as offline set of icons. So to get it working, there is couple of options.

  1. Add link to the site head and load the material-design icons from cdn.
  2. Use iconify icons
  3. Download (some form of) the icon and serve it from static folder.

First two require the setup is connected to he internet. (basically all the time or at least when the dashboard is used)
Third one take many steps to be made correctly and even then it is kind of complicated and depends...

For first one - there is how it works

[{"id":"3e3ebdf4.0a50a2","type":"ui_text","z":"f56ccabd.7567e8","group":"a1b48177.63b91","order":6,"width":"2","height":"1","name":"","label":"text","format":"<span class=\"mdi mdi-water-percent mdi-24px\"></span>","layout":"row-spread","x":310,"y":900,"wires":[]},{"id":"cbd1080f.7f97a8","type":"ui_template","z":"f56ccabd.7567e8","group":"a1b48177.63b91","name":"","order":7,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css\"/>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":320,"y":940,"wires":[[]]},{"id":"a1b48177.63b91","type":"ui_group","name":"Default","tab":"c122ecdc.526d7","order":1,"disp":true,"width":"6","collapse":false},{"id":"c122ecdc.526d7","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
5

I can work with that thanks a lot been pounding on that for a couple of hours.

Again thanks

6

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