Own switch on habpanel

Hello :slight_smile:
I would like to use a very own style for my habpanel. Actually I have some problems with the switches which have 2 states (function)

I startet with a button to switch my plug on:

<div class="col-xs-2 modgrid">
         <button style="background-size: contain; background-repeat: no-repeat;background-position: center center;font-size:20px;" 
            ng-click="sendCmd('Power_Plug_Socket_B', 'ON')">
         <i class="glyphicon glyphicon-random butticon" alt="Shuffle"></i>
         </button>
      </div>

It workes. But I would like to have a switch with on AND off and maybe the current stats (so an “on” if its on and an “off” if its off :smiley: )

I copied the code off the switch of openHab but it didn’t worked:

<div class="box-content switch" ng-click="vm.toggleSwitch()">
    <!-- ngIf: vm.widget.backdrop_icon -->
    <div class="switch-content">
        <div ng-hide="vm.widget.hidelabel" class="ng-binding">Heizung</div>
        <div class="value" ng-class="{ 'switch-off': !vm.valueAsBool() }">
            <!-- ngIf: vm.widget.icon && !vm.widget.hideicon --><widget-icon ng-if="vm.widget.icon &amp;&amp; !vm.widget.hideicon" iconset="vm.widget.iconset" icon="vm.widget.icon" size="vm.widget.icon_size" state="vm.value" class="ng-scope ng-isolate-scope"><div class="icon" ng-class="{backdrop: backdrop, center: center, inline: inline}"><!-- ngIf: backdrop --><!-- ngIf: !backdrop --><img ng-if="!backdrop" ng-style="{ width: size + 'px' }" ng-class="{ colorize: colorize, off: state=='OFF' }" class="icon-tile ng-scope" ng-src="/icon/fire-on?format=svg&amp;state=ON" src="/icon/fire-on?format=svg&amp;state=ON" style="width: 60px;"><!-- end ngIf: !backdrop --></div></widget-icon><!-- end ngIf: vm.widget.icon && !vm.widget.hideicon -->
            <!-- ngIf: !vm.widget.icon -->
            <div><span ng-hide="vm.widget.hideonoff" class="ng-binding">ON</span></div>
        </div>
    </div>
</div>

So could anyone help me with this?

Thank you.