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

General
1

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:

<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.

2

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

What sites ?

How would we know that ?

3

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.

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

4

NR uses FA 4.7 out of the box -

material design icons
https://jossef.github.io/material-design-icons-iconfont/

5

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.

6

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

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