It should just work as on and off. The input boolean just checks to see if the TV is on or off and updates the icon as appropriate.
You just need to change
entity: switch.hub_tv_kijken
to your TV entity.
Otherwise can remove the entity state checks, but you will only be left with the TV icon that is either on or off and it won’t change.
Thanks that sorted it.
Awesome adaptation 
. Can you please share the sources?
That won’t work. The switch.hub_tv_kijken is my entity.
I can’t figure out what i have to change to get the icon_tv to work. I only have a on/off switch.
When i use the original code from Mattias and change the entity i get a error. When i delete the triggers_update, tap_action and hold_action and the boolean part of the icon i get a error.
There is something i’m missing.
custom_fields:
icon_tv: >
[[[
const state = entity.state === 'on' ? 'animate_on' : 'animate_off';
const fill = entity.state === 'on' ? '#20262890' : 'none';
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes animate_on {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.animate_on {
animation: animate_on 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
@keyframes animate_off {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
.animate_off {
animation: animate_off 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
</style>
<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74">
<stop offset="0" stop-color="#64acb7"/>
<stop offset="1" stop-color="#7fdbe9"/>
</linearGradient>
<path d="M2.9,8h44.3v29.9H2.9V8z" fill="${fill}"/>
<path class="${state}" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/>
<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>
</svg>
`;
]]]
What are people doing for icons (specifically talking the svg animation ones)?
I’m after a few, some pretty standard like camera and thermometer, others a little more unique, like Xbox
Thanks for the code but it is still not working.
i am afraid i miss something?
- type: custom:button-card
entity: switch.hub_tv_kijken
style:
top: 23.9%
left: 23.8%
width: 47.7%
custom_fields:
custom_fields:
icon_tv: >
[[[
const state = entity.state === 'on' ? 'animate_on' : 'animate_off';
const fill = entity.state === 'on' ? '#20262890' : 'none';
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes animate_on {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.animate_on {
animation: animate_on 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
@keyframes animate_off {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
.animate_off {
animation: animate_off 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
</style>
<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74">
<stop offset="0" stop-color="#64acb7"/>
<stop offset="1" stop-color="#7fdbe9"/>
</linearGradient>
<path d="M2.9,8h44.3v29.9H2.9V8z" fill="${fill}"/>
<path class="${state}" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/>
<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>
</svg>
`;
]]]
styles:
custom_fields:
icon_tv:
[fill: "[[[ return entity.state === 'on' ? '#616161' : '#9da0a2'; ]]]",
top: 7%, left: 10.7%, width: 3.5vw, position: absolute]
template: base
You’ve got duplicate custom_fields: keys
Hey!! Cool theme. Can you share the steps to install it ?
Thanks
Cicero
Thanks.
I look at it a 100 times and i didn’t see that 
But it is working now 
I also have a temp sensor thats controls the fan audio, how to i get the temp in the right corner beside the fan icon?
This is great thanks!
Hello folks,
I tried to implement birthdays on the sidebar.
I use the anniversary Integration for this, but now, I have no idea what to do next.
What I tried was to copy the “sensor.sidebar_active” like this:
sidebar_birthday:
value_template: >
{% set personen = [states.sensor.anniversary_jane_doe, states.sensor.anniversary_willow, states.sensor.anniversary_james_doe, states.sensor.anniversary_max_muster] %}
But what then?
I just want to see when anyone have the next day birthday and then when its his/her birthday.
Like the sidebar_active, where I only see the switches which are on.
Woukd be great, if anyone could help me. 
According to the readme you get a sensor with “the number of days remaining to the next occurrence”.
Really basic
{% if states('sensor.anniversary_jane_doe') | int < 10 %}
jane's birthday in {{ states('sensor.anniversary_jane_doe') }} days
{% endif %}
Looks absolutely great - is this just a matter of pulling down everything on the repo, does it include all plugins etc ?
How did you encorporate that?
If I copy the code I just get an error
ui-lovelace:
- type: custom:button-card
entity: climate.floor84cca8802001_9_climate
name: Soveværelse
style:
top: 24%
left: 65%
width: 10%
custom_fields:
icon_hue: &icon_heat >
[[[ const state = entity.state === 'heat' ? 'animate' : 'null';
return `
<svg viewBox="0 0 100 100">
<style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path class="${state}" fill="#e15b64" clip-rule="evenodd" fill-rule="evenodd" d="M71.684 50.656c-1.106-1.249-3.024-3.678-4.701-4.028.81 5.24.902 10.16-1.555 14.774-.587-5.587-4.781-10.095-10.212-11.16 2.027-2.1 4.079-4.193 5.517-6.654 3.164-5.418 3.466-12.281 1.163-18.108s-7.073-10.577-12.782-13.279c-2.698-1.277-5.677-2.171-7.851-4.203 4.04 6.908 4.551 15.72 1.335 23.039-2.576 5.862-7.235 10.528-11.458 15.369-3.728 4.274-7.585 8.985-9.26 14.544-1.816 6.028-.424 12.713 2.768 18.07 3.134 5.261 8.402 9.107 14.216 11.169 9.918 3.518 21.564 1.823 30.035-4.371 4.219-3.085 7.709-7.305 9.27-12.257 2.43-7.704-1.327-17.078-6.485-22.905z"/>
</svg>`; ]]]
styles: &icon_heat_styles
custom_fields:
icon_hue:
[top: 11%, left: 4.5%, width: 3.05vw, position: absolute]
template: heat
button_card_templates:
heat:
template: ["base"]
custom_fields:
circle: >
[[[
return `
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${entity.attributes.current_temperature}<tspan font-size="10"></tspan></text></svg>`;]]]
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Dammsugare
style: |
:host .content {
width: 37em;
height: 500px;
}
hide_header: true
card:
type: custom:thermostat-popup-card
entity: "[[[ return entity.entity_id ]]]"
hold_action:
action: toggle
And then I am using this for the pop-up controls:
Hey @Mattias_Persson since now I have the following issue going on:
The sidebar font is small again, probably something has changed in one of the hacs things or in theming. Can you point me in the right direction? Also the background of some popup cards are now suddenly transparent.
just stumbled over your very cool take on Mattias UI and though you didn´t had time to upload it back in september…i wanted to politely ask if you maybe now in a position to share your awesome work!
thanks for an answer in advance
