Dashboard - icons misaligned

[cin...@gmail.com]

Hi!

I recently switched from the old contrib-dashboard to node-red-dashboard. Everything seems to work nicely, except for some misalignments in template nodes. Formerly, the following (only relevant parts) template code produced a button with a centered icon.

<div flex layout="row" layout-align="space-around center">

    <md-button ng-repeat="b in buttons" class="md-icon-button" ng-click="click(b)">

        <ng-md-icon icon="{{b.state?b.iconTrue:b.iconFalse}}"

                        ng-style="{color: b.state?b.colorTrue:b.colorFalse}"></ng-md-icon>

    </md-button>

</div>

<script>

(function(scope) {

    scope.buttons = [{topic:'pp',

                    iconFalse: 'pause', colorFalse: 'black',

                    iconTrue: 'play_arrow', colorTrue: 'blue',

                    state: false}];

    scope.click = function(b) {

        

    }

})(scope);

</script>

For the new dashboard, the icons are not centered, as seen in the attachment (Browser tested were firefox; chrome mobile and ubuntu desktop). Any ideas?

By the way, I'm using quite many of those templates to detach the state of a dashboard button from its command. This would be a nice option for the switch node: When pressing, the switch sends a command opposite to its current state, but is not updated immediately. Only incoming messages can change the state.

[cin...@gmail.com]

no idea?

[Dave C-J]

Add a tiny bit of style to the button... (or rather revery the overall style..

<md-button ng-repeat="b in buttons" style="padding:0px;" class="md-icon-button" ng-click="click(b)">

[cin...@gmail.com]

thanks! Simple and obvious solution (I should have tested this by myself......) 

Any comments on this part: 

This would be a nice option for the switch node: When pressing, the switch sends a command opposite to its current state, but is not updated immediately. Only incoming messages can change the state.