Custom button card doing strange things

Hi all, wondering if I can borrow your insight here as I’m sure I’m not going mad.
This is what it is meant to look like
image
I touch the button and:

  1. The word Office turns yellow - working
  2. The background changes to the spotlight PNG - working only when I click edit / preview the code in the dashboard, otherwise in normal dashboard view it looks like this:
    image
  3. Then I’m trying to get the motion icon to come up whenever the state of binary_sensor.kids_room_sensor_occupancy turns to detected - not working

Appreciate any help, the code follows:

type: custom:button-card
entity: sensor.kids_room_sensor_temperature
name: Office
label: Office
layout: icon_state
show_state: true
show_name: false
show_label: true
styles:
  card:
    - height: 60px
    - background: |
        [[[
          if (states['light.office'].state == "on" )
            return 'url(/local/spot.png)';
        ]]]
    - background-color: |
        [[[
          if (states['light.office'].state == "on" )
            return 'black' ;
        ]]]
    - background-position: '-25px'
    - background-size: 137% 97%;
    - background-repeat: no-repeat
    - overflow: hidden
  state:
    - padding-bottom: 37px
    - position: absolute
    - right: '-10px'
    - font-size: 11px
    - color: '#CCCCCC'
  icon: >
    [[[

    if (states['binary_sensor.kids_room_sensor_occupancy'].state === "detected")
      return "mdi:motion-sensor";
    else if (states['binary_sensor.kids_room_sensor_occupancy'].state ===
    "clear")
      return 'mdi:light-recessed';
    ]]]  
  label:
    - font-size: 14px
    - color: |
        [[[
        if (states['light.office'].state === "on")
          return "yellow";
        else if (states['light.office'].state === "off")
          return "white";
        ]]]
tap_action:
  action: toggle
  entity: light.office

You have to place the logic under icon: not under the styles for the icon.

type: custom:button-card
entity: sensor.kids_room_sensor_temperature
name: Office
label: Office
layout: icon_state
icon: |
          [[[ return states['binary_sensor.kids_room_sensor_occupancy'].state === 'on' ? 'mdi:motion-sensor' : 'mdi:light-recessed';
           ]]]
show_state: true
show_name: false
show_label: true

The height of the card is also hiding the icon. I’ll post additional code to fix that.

Good spot @LiQuid_cOOled thanks, and I’ve shifted the icon. Any idea about ther background?

Have this so far…just need to add the logic back in

entity: sensor.basement_sensor
type: custom:button-card
layout: icon_state
name: Office
show_state: true
show_name: true

icon: |
  [[[ return entity.state === 'on' ? 'mdi:motion-sensor' : 'mdi:light-recessed';
   ]]]
size: 1.5em
styles:
  icon:
    - color: red
    
  card:
    - width: 60px
    - height: 60px
    - background-repeat: no-repeat
    - background-image: url('/local/pics/black.png')
    - background-size: cover;
    - padding: 2px
  name:
   - color: yellow
   - font-size: 14px
  state:
   - font-size: 10px
   - padding: 20%

image

Let’s start here and adjust. One thing to remember, binary sensors return a state of ON and OFF.

entity: sensor.kids_room_sensor_temperature
type: custom:button-card
layout: icon_state
name: Office
show_state: true
show_name: true
icon: >
  [[[ return states[binary_sensor.kids_room_sensor_occupancy'].state === 'on' ?
  'mdi:motion-sensor' : 'mdi:light-recessed';
   ]]]
size: 1.5em
styles:
  card:
    - width: 80px
    - height: 60px
    - background-repeat: no-repeat
    - background: black
    - background-image: |
        [[[
          if (states[light.office'].state == "on" )
            return 'url(/local/spot.png)';
        ]]]
    - background-size: cover;
    - padding: 2px
  name:
    - color: |
       [[[ return states['light.office'].state === 'on' ? 'yellow' :
        'white';
         ]]]
    - font-size: 14px
  state:
    - font-size: 10px
    - padding: 20%

image