# CSS button not working

**URL:** https://discourse.nodered.org/t/css-button-not-working/27962
**Category:** Dashboard
**Created:** [7 June 2020 22:54 UTC](https://discourse.nodered.org/t/css-button-not-working/27962 "2020-06-07T22:54:58Z")
**Posts on this page:** 10
**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: [7 June 2020 22:54 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/1 "2020-06-07T22:54:58Z")

</div>

I am playing a lot with `CSS` buttons.

For the most they are working.

But this one isn't playing the game.

Given all the other buttons are working and when I set the icon name it doesn't show.

Code:

```auto
<div id="GButtonM_ANA">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span>analytics</span>
            <md-tooltip>Device status</md-tooltip>
        </i>
    </md-button>
</div>

<script>

(function($scope) {

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

```

The other weird thing is the _popup_ appears on the button beside it.

![Screenshot from 2020-06-08 08-53-44](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/9953f1b7244b9092b4b05c1c38457f0c1bb83052.png)

## Oops

Ok, my bad on the pop up.  
It is just _how_ it is popping up.  
Other buttons the pop up is **on** the button. For reasons unknown: this is beside the button.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [7 June 2020 22:58 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/2 "2020-06-07T22:58:44Z")

</div>

> [@Trying\_to\_learn](#):
>
> weird thing is the _popup_ appears on the button

^ that's a tooltip & it's right there in the code you posted...

> [@Trying\_to\_learn](#):
>
> `<md-tooltip>Device status</md-tooltip>`

---

<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: [7 June 2020 22:59 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/3 "2020-06-07T22:59:58Z")

</div>

(See my _oops_ part)

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [7 June 2020 23:00 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/4 "2020-06-07T23:00:58Z")

</div>

Show us the code of a working icon in a button Vs this code.

Its likely quite obvious if you look at 2 side by side.

---

<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: [7 June 2020 23:02 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/5 "2020-06-07T23:02:30Z")

</div>

Working:

```auto
<div id="GButtonM_TEL">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span> track_changes</span>
            <md-tooltip>Telemetry</md-tooltip>
        </i>
    </md-button>
</div>

<script>

(function($scope) {

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

```

Not working:

```auto
<div id="GButtonM_ANA">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span>analytics</span>
            <md-tooltip>Device status</md-tooltip>
        </i>
    </md-button>
</div>

<script>

(function($scope) {

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

```

The only _difference_ is the icon.

If I copy the `track_changes` icon to the button, it works.  
So.....

I suspect that all the `md-icons` are not loaded.

How do I do 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: [7 June 2020 23:14 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/6 "2020-06-07T23:14:28Z")

</div>

Oh, back to the _popup_ thing.

This is a comparison of the popups that threw me.

Expected:

![Screenshot from 2020-06-08 09-11-42](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cdde2c7b0576ded86b45409bc8da34d33257bad.png)

The button in question:  
 ![Screenshot from 2020-06-08 09-11-45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f677836a9a726f54a1a0f91e83a6ee03ac9b1d88.png)

That seems strange that in one button the popup is over the button, and on the other it is _in another post code_ to the button.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [7 June 2020 23:19 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/7 "2020-06-07T23:19:34Z")

</div>

I don't think you use material icons like that. Its something like `<md-icon>` and you don't use `class` try searching the forum or internet on using material icons in angular

Edit...  
Maybe not md-icon but pretty sure you put the icon name inside the tag (not in the class)

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [8 June 2020 00:06 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/8 "2020-06-08T00:06:11Z")

</div>

There you go...

> [@Material design icon in \`button\` node](https://discourse.nodered.org/t/material-design-icon-in-button-node/15257):
>
> Believe me when I say I am not doing this to annoy anyone. I want to put this on a button as the "icon". \<i class="material-icons"\> repeat\_one \</i\> Obviously I can't just put that in the icon field. My brain has failed me again in working out how to do it. Thanks.

Copy the code this ^ guy did here ^ into your button

Edit...  
Forgot to say, it's probably not gonna work with extra stuff inside the `<i>`

Try this...

```auto
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            analytics
        </i>
        <md-tooltip>Device status</md-tooltip>
    </md-button>

```

---

<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: [8 June 2020 02:00 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/9 "2020-06-08T02:00:29Z")

</div>

> [@Steve-Mcl](#):
>
> Forgot to say, it's probably not gonna work with extra stuff inside the `<i>`

Thanks.

You are correct that it _doesn't work_. But I don't think it is for the reason you say.

There are a lot of other buttons which have that _attribute_ and they work.

I'll have to keep digging to see what I find.

---

<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: [8 July 2020 02:00 UTC](https://discourse.nodered.org/t/css-button-not-working/27962/10 "2020-07-08T02:00:30Z")

</div>

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