# Issues Getting Some Material Icons to Appear

**URL:** <https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766>\
**Category:** Dashboard\
**Created:** [27 December 2021 19:52 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766 "2021-12-27T19:52:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jdo300](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jdo300/32/79415_2.png) [@Jdo300](https://discourse.nodered.org/u/Jdo300)\
**Post date:** [27 December 2021 19:52 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766/1 "2021-12-27T19:52:36Z")

</div>

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:

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

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 December 2021 20:22 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766/2 "2021-12-27T20:22:10Z")

</div>

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](https://github.com/node-red/node-red-dashboard#icons)**
>
> A dashboard UI for Node-RED. Contribute to node-red/node-red-dashboard development by creating an account on GitHub.

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

---

<div class="post-metadata">

**Author:** ![Jdo300](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jdo300/32/79415_2.png) [@Jdo300](https://discourse.nodered.org/u/Jdo300)\
**Post date:** [27 December 2021 20:44 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766/3 "2021-12-27T20:44:08Z")

</div>

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:

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

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 December 2021 21:05 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766/4 "2021-12-27T21:05:44Z")

</div>

The library link href seems correct according to google [docs](https://developers.google.com/fonts/docs/material_icons#setup_method_1_using_via_google_fonts)

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](https://fonts.google.com/icons?icon.query=cylinder)

---

<div class="post-metadata">

**Author:** ![Jdo300](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jdo300/32/79415_2.png) [@Jdo300](https://discourse.nodered.org/u/Jdo300)\
**Post date:** [27 December 2021 21:14 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766/5 "2021-12-27T21:14:02Z")

</div>

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/](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](https://www.npmjs.com/package/@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.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 December 2021 21:24 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766/6 "2021-12-27T21:24:09Z")

</div>

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

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

```

**Example**

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

```

---

<div class="post-metadata">

**Author:** ![Jdo300](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jdo300/32/79415_2.png) [@Jdo300](https://discourse.nodered.org/u/Jdo300)\
**Post date:** [28 December 2021 17:10 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766/7 "2021-12-28T17:10:01Z")

</div>

This worked like a charm! Thank you!

---

<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:** [11 January 2022 17:10 UTC](https://discourse.nodered.org/t/issues-getting-some-material-icons-to-appear/55766/8 "2022-01-11T17:10:57Z")

</div>

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