Simple button using bootstrap glyphicons

Apps & Services HABPanel
1

I have spent quite a while trying to figure this one out - and I am fully aware that any web developer would probably have coded a solution to this, quicker than I can type this message. (and so I hope that one of those web dev type folk feels the urge to be helpful :wink:

I am simply trying to emulate the default panel (where the whole tile is clickable - and changes on click, then reverts straight afterwards) - but I’d like the only item on the tile to be a bootstrap glyphicon (I am create a simple remote)

I have tried 2 approaches:

This one functions OK, but I end up with only part of the tile being clickable:

	<div ng-init='nav = {
		 "name": "OK",
                "item": "loungeNav_playing",
                "type": "button",
                "background": "transparent",
                "command": "CENTER"
		}'>
    <i class="glyphicon glyphicon-menu-up"></i>
	</div>
	
	<widget-button class="btn btn-lg" style="width: 100%; height: 100%; background: transparent; color: grey; font-size: 130%" ng-model="nav"/>

and this approach looks correct, but when I click on the button, I am left with a blue surround on the button until I click something else:

<div>
  <button class="btn btn-lg" style="width: 100%; height: 100%; background: transparent; color: grey; font-size: 130%" ng-mousedown="sendCmd('loungeNav_Playing', 'GO')" >
    <i class="glyphicon glyphicon-menu-down"></i>
  </button>
</div>

Needless to say, neither is what I want.

I’d simply like a tile that looks and behaves like the default button widget - with a glyphicon as the text displayed.
Surely this should be super simple?