How to utilise the door-open, door-closed and door locked icons

[rchiileea]

how to make use of doors with lock icons for your smart locks

my best advice here would be to use the custom:button-card

please comment out the hashtags and the writing inbetween them, also very important to make sure you dont comment out the ' ' around your locks and door contact sensor

type: custom:button-card
entity: binary_sensor.front_door_sensor_contact
icon: |
  [[[
     if (states['your-lock-here'].state == 'on)
      return "phu:panel-front-door-locked"                                        #put your choice of door icon here locked version#
     if (states['your-door-contact-sensor-here'].state == 'on')          #put your choice of door icon here open version#
      return "phu:panel-frontdoor-open"; 
     if (states['your-door-contact-sensor-here'].state == 'off')         #put your choice of door icon here closed version#
      return "phu:panel-frontdoor-close"
  ]]]
name: Front door
aspect_ratio: 1/1
styles:
  img_cell:
    - padding-left: 50%
    - padding-right: 50%
    - justify-content: center
  grid:
    - grid-template-areas: '"l" "i" "n" "s"'
    - grid-template-rows: min-content 1fr min-content min-content
    - grid-template-columns: 1fr
  label:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - opacity: 0.6
    - padding: 0 15px 5px

  name:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - padding-left: 15px
  state:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - opacity: 0.6
    - padding: 0 15px 5px
show_label: true
show_state: true
label: |
  [[[
     if (states['your-lock-here'].state == 'on') 
      return "Unlocked"; 
     if (states['your-lock-here'].state == 'off')
      return "Locked"
  ]]]

This will give this result for you

remove the aspect_ratio line from the code to change the from sqare to rectangle shape button, also if you dont like the size of the icon and want it smaller play around with the img_cell part of the code, for the state, name of the door, you can edit them postioning under there section of the code.

the label part of the styles is just for the text, locked and unlocked in the card, remove that and the show_label line from the code

if you want to have a style added to add glow when the door is open add this to the bottom of the code

state:
  - value: 'on'
    styles:
      icon:
        - '-webkit-filter': contrast(96%) drop-shadow(0px 0px 5px RGB(181,149,219)
      card:
        - border-style: solid
        - border-width: 2px
        - border-radius: 20px
        - '-webkit-filter': contrast(96%) drop-shadow(0px 0px 5px RGB(181,149,219)