# (sorry) material-icon icons. How to use them?

**URL:** https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455
**Category:** General
**Created:** [28 June 2023 07:51 UTC](https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455 "2023-06-28T07:51:33Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2023 07:51 UTC](https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455/1 "2023-06-28T07:51:33Z")

</div>

Yes, I have asked in the past and it was answered.  
_I've read the replies but they are not .... compatible (?) with the structure that works now_

I want to make a new button.

Existing code:

```auto
<div id="GButtonM_TWK">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span> videogame_asset</span> // this is the icon used.
            <md-tooltip>Tweaks</md-tooltip>
        </i>
    </md-button>
</div>

<script>

(function($scope) {

$('#GButtonM_TWK').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": "Tweaks"});
});
    
})(scope);
</script>

```

So that works.  
But looking on sites the `<class>` and `<span>` are the other way around.

I would like to find the original site I used with that _original_ set of icons and I could search in there.

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [28 June 2023 17:41 UTC](https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455/2 "2023-06-28T17:41:47Z")

</div>

Not really sure what the question is, can you provide some more details please ?

> [@Trying\_to\_learn](#):
>
> But looking on sites

What sites ?

> [@Trying\_to\_learn](#):
>
> I would like to find the original site I used

How would we know that ?

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2023 17:50 UTC](https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455/3 "2023-06-28T17:50:12Z")

</div>

NR comes with either FA or MD icons _in the box_.  
(or both)

I know I have expanded the set of icons I can use on some machines and it is no bother to apply it to all machines.  
But doing that introduces the _Choice paradox_ and I will/could have too many icons from which to choose.

How can I see the _out of the box_ icons that come with NR?

In answer to your questions about sites:  
[One example with `span` and `class` the other way around.](https://pictogrammers.github.io/@mdi/font/6.4.95/)

Ok, this is `mdi`, not `material-design`. But I have found their _names_ change sometimes.

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [28 June 2023 18:03 UTC](https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455/4 "2023-06-28T18:03:51Z")

</div>

NR uses FA 4.7 out of the box -

> **[Font Awesome Icons](https://fontawesome.com/v4/icons/)**
>
> Font Awesome, the iconic font and CSS framework

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

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [28 June 2023 18:08 UTC](https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455/5 "2023-06-28T18:08:35Z")

</div>

> [@Trying\_to\_learn](#):
>
> One example with `span` and `class` the other way around.

In this example the class is added to the span tag, rather than the i tag, it looks a bit neater but either is OK.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [29 June 2023 02:08 UTC](https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455/6 "2023-06-29T02:08:19Z")

</div>

I am still getting my head around the syntax/structure.

Alas I fear I have a LONG WAY TO GO before I master it.

---

<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: [13 July 2023 02:08 UTC](https://discourse.nodered.org/t/sorry-material-icon-icons-how-to-use-them/79455/7 "2023-07-13T02:08:51Z")

</div>

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