# Material Design Icons and Change Color SVG Image

**URL:** <https://discourse.nodered.org/t/material-design-icons-and-change-color-svg-image/16328>\
**Category:** Dashboard\
**Created:** [4 October 2019 17:18 UTC](https://discourse.nodered.org/t/material-design-icons-and-change-color-svg-image/16328 "2019-10-04T17:18:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rbbg](https://avatars.discourse-cdn.com/v4/letter/r/e36b37/32.png) [@rbbg](https://discourse.nodered.org/u/rbbg)\
**Post date:** [4 October 2019 17:18 UTC](https://discourse.nodered.org/t/material-design-icons-and-change-color-svg-image/16328/1 "2019-10-04T17:18:19Z")

</div>

Hi, I would like to use the Material Design Icons from [http://materialdesignicons.com](http://materialdesignicons.com) in the Nodered Dashboard. The Integration works fine on this way.  
`<img src="/icons/thermometer.svg" />`

Now i would like to change the Color of the Icon. Like this, but it dont work.  
`<img src="/icons/thermometer.svg" style="color: red" />` or  
`<img src="/icons/thermometer.svg" style="fill: red" />`

Is there a better way of integration? How can i change the color?  
Thanks for a quick note.

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [4 October 2019 18:39 UTC](https://discourse.nodered.org/t/material-design-icons-and-change-color-svg-image/16328/2 "2019-10-04T18:39:17Z")

</div>

Have you searched the forum for “material design” ? Icons come up a lot

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [4 October 2019 19:21 UTC](https://discourse.nodered.org/t/material-design-icons-and-change-color-svg-image/16328/3 "2019-10-04T19:21:31Z")

</div>

> [@rbbg](#):
>
> Material Design Icons

This link explains how to use CSS to change the color of Material Design icons

[https://google.github.io/material-design-icons/](https://google.github.io/material-design-icons/)

---

<div class="post-metadata">

**Author:** ![rbbg](https://avatars.discourse-cdn.com/v4/letter/r/e36b37/32.png) [@rbbg](https://discourse.nodered.org/u/rbbg)\
**Post date:** [4 October 2019 23:32 UTC](https://discourse.nodered.org/t/material-design-icons-and-change-color-svg-image/16328/4 "2019-10-04T23:32:40Z")

</div>

Thanks for the fast response. The MDI Icon Set have much more Icons then Googles Material Design.

I have added the MDI CSS and Fonts to the Nodered Dashboard directory and linked the css in the index.html.

Now it is possible to integrate the mdi icons und change the color like that.  
`<span class="mdi mdi-thermometer mdi-light"></span>`

Thanks for help