Different icon based on switch state?

Apps & Services HABPanel
1

In HABPanel it doesn’t appear to be possible at the moment to have a different icon for a switch based on the state. Has anyone done a custom widget to achieve this? My mockup below is what I’m trying to achieve so that it’s even more obvious when lights are on…

screenshot

2

Tommy, justuse a custom template and an ng-if statement to make the decision on colouring.
You may need to create some css for the colouring, but should not be too bad

4

A modified Nuki lock widget should fit your needs. Create a new widget or modify items in below code and put into template widget.

You need to change:
itemValue(config.contact)
sendCmd(config.lock_close, ‘ON’)
sendCmd(config.lock_open, ‘ON’)
config.icon_size

<style>

.custombutton {
  fill: blue;
}
  
</style>
		<div class="custombutton">
       <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
                 display: flex; margin: 0; padding: 0; overflow:hidden" ng-if="itemValue(config.contact) =='CLOSED'">
        <button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; border:0"
                ng-click="sendCmd(config.lock_open, 'ON')">
          <widget-icon iconset="'eclipse-smarthome-classic'" icon="'lock-closed'" size="(config.icon_size)"/>
        </button>
      </div>
      
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
                 display: flex; margin: 0; padding: 0; overflow:hidden" ng-if="itemValue(config.contact) =='OPEN'">
        <button class="btn btn-lg" style="width: 100%; height: 100%; padding: 0; background: inherit; border:0"
                ng-click="sendCmd(config.lock_close, 'ON')">
          <widget-icon iconset="'eclipse-smarthome-classic'" icon="'lock-open'" size="(config.icon_size)"/>
        </button>
      </div> 
	</div>
5

note that your tag isn’t scoped. So every element that uses that class in your page will have that fill: blue property.