Help with UI_button and the size

[Trying_to_learn]

Recently I was shown a trick to make a button which sends two signals.
One when pressed and one when released.

I want to put an icon in/on it rather than text.
Alas unless it is 2x1 size, the icon is corrupted.

[{"id":"4846c8f.8bc5bb8","type":"ui_template","z":"1d85b106.5dfcd7","group":"753d90f1.02b878","name":"Up","order":13,"width":"1","height":1,"format":"<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\"> add </i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":3570,"y":330,"wires":[["bb7f079f.86f9d8"]]},{"id":"753d90f1.02b878","type":"ui_group","z":"","name":"Full Remote","tab":"39b306a2.96619a","order":1,"disp":true,"width":"3","collapse":false},{"id":"39b306a2.96619a","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

Well, I say corrupted in that it isn't shown and I get sliders around it.

Is there a way to make it 1x1 size and not get the sliders?

Sorry if this is a page 1 question. But I am admitting I don't know.

Oh, and while asking:
How do I change the background and foreground colours?

[edje11]

Works fine here with Mozilla and Chrome.
Tested with a widget size of 48x48.

[Trying_to_learn]

Ok, so I am now going to put on my second "Stupid hat"......

You have it as 48x48 pixel (widget) size.

I'm guessing that is the size I sent it as?

(I just tried it again and now it works.)

Argh!

Ok.... Third "Stupid hat".... The colours....
It comes up as black on white. I'd prefer it white on black.

This is the screen as is with the new button active.

Also in the pipeline is to change it to the "Volume up" button (as shown under the Disable button and replace the other one with the "Volume down" button)

If I make the button this:

[{"id":"4846c8f.8bc5bb8","type":"ui_template","z":"1d85b106.5dfcd7","group":"753d90f1.02b878","name":"Up","order":13,"width":"1","height":1,"format":"<button ng-mousedown=\"send({payload: 'down'})\" ng-mouseup=\"send({payload: 'up'})\"><i class=\"material-icons\">add</i></button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":3570,"y":330,"wires":[["bb7f079f.86f9d8"]]},{"id":"753d90f1.02b878","type":"ui_group","z":"","name":"Full Remote","tab":"39b306a2.96619a","order":1,"disp":true,"width":"3","collapse":false},{"id":"39b306a2.96619a","type":"ui_tab","z":"","name":"TV remote control","icon":"dashboard","order":45,"disabled":false,"hidden":false}]

I see this on the browser: