Issues Getting Some Material Icons to Appear

[Jdo300]

I'm trying to use some material icons on my dashboard for button icons and labels and I'm wondering why some icons work and some don't. Here's a code sample to illustrate what I'm running into:

<i class="material-icons big-icon">mi_cloud_outline</i><BR>
<i class="material-icons big-icon">mi_cylinder</i><BR>
<i class="material-icons big-icon">mi_home</i>

The first and third icon show up just fine but not the middle one. Is there something special about the middle icon that requires a different syntax or something?

[UnborN]

Hello .. i was reading the Dashboard documentation and there a section there regarding the use of icons and what icon libraries are preloaded.

GitHub - node-red/node-red-dashboard: A dashboard UI for Node-RED

I followed the Angular Material icon link (which is what you are using in you example)
and i cant find in its list a cylinder icon. It doesnt seem to be supported. Try to use a different icon or one from another library

[Jdo300]

Yes, it is true that this icon is not available from the material icons library. I didn't show this,but I did directly include a reference to the material design icons in a template node in the header of the dashboard so that I can use the ones that are available directly online:

<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">

But I noticed that even with this, some of the icons that do show up are not exactly the same as the ones on the website so maybe this is still not being used?

Also, I tried inputting this code (including the href link) into a jsFiddle and it behaves the same way. Am I including the wrong link for the material design icon library?

[UnborN]

The library link href seems correct according to google docs

Dont know .. you have to share an example flow in order to replicate it and see what is not working
one thing is for sure, even this Material icons library doesnt have a cylinder icon
search

[Jdo300]

Ok, I'm realizing that I probably don't understand how the material design icons library works. The specific icon I want to use can be seen by searching for "cylinder" here at the material design icons website: https://materialdesignicons.com/

The website mentions that this particular icon is contributed by user Colton Wiscombe and the details panel gives the following link to import it:

import { mdiCylinder } from '@mdi/js';

What does this exactly mean and how do I use it on my dashboard? I understand that it is importing something for JavaScript but I'm not clear on how this works. Is there some additional documentation explaining how to use this? I'm guessing this may be why my reference to the google Api is not working.

[UnborN]

that seems to be a different icon library .. it is a bit confusing
Use its cdn to load it

https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css

Example

[{"id":"ee5a990b2df90668","type":"ui_template","z":"54efb553244c241f","group":"814ee4a2e6231591","name":"","order":0,"width":"12","height":"5","format":"\n<div>Bob lives in a <span class=\"mdi mdi-48px mdi-cylinder\"></span></div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":680,"y":1240,"wires":[[]]},{"id":"02a9a70de43c805f","type":"ui_template","z":"54efb553244c241f","group":"814ee4a2e6231591","name":"icon library","order":0,"width":0,"height":0,"format":"<link href=\"https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css\" rel=\"stylesheet\">\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":690,"y":1180,"wires":[[]]},{"id":"814ee4a2e6231591","type":"ui_group","name":"Default","tab":"11b9c054a98cd693","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"11b9c054a98cd693","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[Jdo300]

This worked like a charm! Thank you!