This question is better suited for the custom: button-card thread
Button Card used JavaScript vs Jinga so there is a lot to adjust in your code. You can use Card Mod, but it can be accomplished without it with Button-Card
This a Mushroom Card Example
type: custom:mushroom-template-card
entity: light.pc_lights
primary: |-
{% if is_state(config.entity, 'off') %}
Idle
{% elif is_state(config.entity, 'on') %}
On
{% else %}
Full
{% endif %}
icon: mdi:washing-machine
icon_color: |-
{% if is_state(config.entity, 'on') -%}
orange
{%- else -%}
blue
{%- endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape:before {
content: '';
z-index: 1;
position: absolute;
justify-content: center;
align-items: center;
width: 22%;
height: 11.5%;
border: 1px solid black;
border-radius: 1rem 1rem 0 0;
background: {{ 'deepskyblue' if
is_state(config.entity, 'on') else
'black' }};
animation: {{ 'circle 2s linear infinite alternate'if
is_state(config.entity, 'on') else
'animation: none;' }};
transform-origin: 50% 85%;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform:rotate(360deg);}
}
.shape:after {
content: '';
position: absolute;
width: 27%;
height: 27%;
border-radius: 100%;
border: 1px solid white !important;
background:black;
top: 14px;
justify-content: center;
align-items: center;
}
Not perfect, but start with this for your Button Card Icons. My entities in the code will need changed to yours…
entity: light.pc_lights
name: Basement
icon: mdi:stairs-down
type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
show_name: true
show_state: false
size: 100%
styles:
grid:
- grid-template-areas: " \"i n n n n power_icon power_icon2 power_icon3\" \"i l l l l power_icon power_icon2 power_icon3\" \"i s1 s1 s1 s1 power_icon power_icon2 power_icon3\" \"i s1 s1 s1 s1 power_icon power_icon2 power_icon3\" "
- grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr
name:
- justify-self: start
- font-weight: bold
custom_fields:
power_icon:
card:
type: custom:button-card
entity: light.pc_lights
size: 5em
icon: mdi:washing-machine
show_name: false
styles:
card:
- border: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Washer Status
style: |
--popup-background-color: #444;
content:
square: false
columns: 1
type: grid
cards:
- type: vertical-stack
cards:
- type: picture-elements
elements:
- type: image
entity: sensor.lg_washer_run_state
image: >-
/local/community/lg-washer-dryer-card/lg-icons/sensing.png
state_image:
Detecting: >-
/local/community/lg-washer-dryer-card/lg-icons/sensing-on.png
style:
top: 33%
left: 33%
width: 20%
image-rendering: crisp
- type: image
entity: sensor.lg_washer_run_state
image: >-
/local/community/lg-washer-dryer-card/lg-icons/wash.png
state_image:
Washing: >-
/local/community/lg-washer-dryer-card/lg-icons/wash-on.png
style:
top: 33%
left: 51%
width: 20%
image-rendering: crisp
- type: image
entity: sensor.lg_washer_run_state
image: >-
/local/community/lg-washer-dryer-card/lg-icons/rinse.png
state_image:
Rinsing: >-
/local/community/lg-washer-dryer-card/lg-icons/rinse-on.png
style:
top: 33%
left: 69%
width: 20%
image-rendering: crisp
- type: image
entity: sensor.lg_washer_run_state
image: >-
/local/community/lg-washer-dryer-card/lg-icons/spin.png
state_image:
Spinning: >-
/local/community/lg-washer-dryer-card/lg-icons/spin-on.png
style:
top: 33%
left: 87%
width: 20%
image-rendering: crisp
- type: image
entity: sensor.lg_washer
image: >-
/local/community/lg-washer-dryer-card/lg-icons/wifi.png
state_image:
"on": >-
/local/community/lg-washer-dryer-card/lg-icons/wifi-on.png
style:
top: 73%
left: 32%
width: 10%
image-rendering: crisp
- type: image
entity: sensor.lg_washer_door_lock
image: >-
/local/community/lg-washer-dryer-card/lg-icons/lock.png
state_image:
"on": >-
/local/community/lg-washer-dryer-card/lg-icons/lock-on.png
style:
top: 73%
left: 45%
width: 10%
image-rendering: crisp
- type: state-label
entity: sensor.blank
prefix: ""
style:
color: "#555"
font-family: segment7
font-size: 50px
left: 95%
top: 74%
transform: translate(-100%,-50%)
- type: state-label
entity: sensor.washer_time_display
style:
color: "#8df427"
font-family: segment7
font-size: 50px
left: 95%
top: 74%
transform: translate(-100%,-50%)
image: >-
/local/community/lg-washer-dryer-card/hass-washer-card-bg.png
- type: entities
entities:
- entity: sensor.lg_washer
type: attribute
attribute: current_course
name: Current Course
icon: mdi:tune-vertical-variant
- entity: sensor.lg_washer
type: attribute
attribute: water_temp
name: Water Temperature
icon: mdi:coolant-temperature
- entity: sensor.lg_washer
type: attribute
attribute: spin_speed
name: Spin Speed
icon: mdi:rotate-right
hold_action:
action: more-info
card_mod:
style: |
ha-state-icon:before {
content: '';
z-index: 1;
position: absolute;
justify-content: center;
align-items: center;
left: 19px;
top: 25px;
width: 34%;
height: 18%;
border: 1px solid black;
border-radius: 1rem 1rem 0 0;
background: {{ 'deepskyblue' if
is_state('light.pc_lights', 'on') else
'black' }};
animation: {{ 'circle 2s linear infinite alternate'if
is_state('light.pc_lights', 'on') else
'animation: none;' }};
transform-origin: 50% 85%;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform:rotate(360deg);}
}
ha-state-icon:after {
content: '';
position: absolute;
left: 14px;
top: 19px;
width: 50%;
height:50%;
border-radius: 100%;
border: 1.5px solid white !important;
background:black;
justify-content: center;
align-items: center;
}
power_icon2:
card:
type: custom:button-card
entity: sensor.lg_dryer
size: 5em
icon: mdi:tumble-dryer
show_name: false
styles:
card:
- border: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Dryer Status
style: |
--popup-background-color: #444;
content:
square: false
columns: 1
type: grid
cards:
- type: vertical-stack
cards:
- type: picture-elements
elements:
- type: image
entity: sensor.lg_dryer_run_state
image: >-
/local/community/lg-washer-dryer-card/lg-icons/dry.png
state_image:
Drying: >-
/local/community/lg-washer-dryer-card/lg-icons/dry-on.png
style:
top: 33%
left: 69%
width: 20%
image-rendering: crisp
- type: image
entity: sensor.lg_dryer_run_state
image: >-
/local/community/lg-washer-dryer-card/lg-icons/cool.png
state_image:
Cooling: >-
/local/community/lg-washer-dryer-card/lg-icons/cool-on.png
style:
top: 33%
left: 87%
width: 20%
image-rendering: crisp
- type: image
entity: sensor.lg_dryer
image: >-
/local/community/lg-washer-dryer-card/lg-icons/wifi.png
state_image:
"on": >-
/local/community/lg-washer-dryer-card/lg-icons/wifi-on.png
style:
top: 73%
left: 32%
width: 10%
image-rendering: crisp
- type: state-label
entity: sensor.blank
prefix: ""
style:
color: "#555"
font-family: segment7
font-size: 50px
left: 95%
top: 74%
transform: translate(-100%,-50%)
- type: state-label
entity: sensor.dryer_time_display
style:
color: "#8df427"
font-family: segment7
font-size: 50px
left: 95%
top: 74%
transform: translate(-100%,-50%)
image: >-
/local/community/lg-washer-dryer-card/hass-dryer-card-bg.png
- type: entities
entities:
- entity: sensor.lg_dryer
type: attribute
attribute: current_course
name: Current Course
icon: mdi:tune-vertical-variant
- entity: sensor.lg_dryer
type: attribute
attribute: temp_control
name: Temperature Control
icon: mdi:thermometer
- entity: sensor.lg_dryer
type: attribute
attribute: dry_level
name: Dry Level
icon: mdi:air-filter
hold_action:
action: more-info
card_mod:
style: |
ha-card {
{% if is_state('sensor.lg_dryer', "on") %}
--card-mod-icon-color: orange;
{% elif is_state('sensor.lg_dryer', "off") %}
--card-mod-icon-color: white;
{% else %}
--card-mod-icon-color: red;
{% endif %}
}
ha-state-icon {
{% if is_state('sensor.lg_dryer', "on") %}
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
transform-origin: 50% 65%;
{% else %}
{% endif %}
}
@keyframes shake {
{% if is_state('sensor.lg_dryer', "on") %}
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
{% else %}
{% endif %}
}
@keyframes drum {
{% if is_state('sensor.lg_dryer', "on") %}
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
{% else %}
{% endif %}
}
power_icon3:
card:
type: custom:button-card
entity: sensor.pond_depth
size: 5em
icon: mdi:gas-cylinder
show_name: false
show_state: false
icon_color: white
tap_action:
action: more-info
hold_action:
action: more-info
styles:
card:
- border: none
