I can’t reproduce your error. But that part of the circle template
&& entity.state !== 'off'
is redundant because the colors already refer to the active states (didn’t recognise it yesterday, was too tired).
The error image you posted belongs to an entity in the section Sovrum, but your posted code belongs to Studio.
This is what I’m using (circle template, styles section):
- --c-stroke-color-on: >
[[[
let d = entity.entity_id.split('.')[0];
return (d == 'light')
? ( (!entity.attributes.rgb_color) ? 'rgba(255,194,0, 1)' : 'var(--button-card-light-color)')
: (d == 'climate') ? 'coral'
: (d == 'cover') ? 'indigo'
: (d == 'media_player') ? 'purple'
: (d == 'person') ? 'green'
: '#717273';
]]]
Thanks! I’ll test it out without the redundant part. I know the image belongs to Sovrum, but that’s where the trouble occur when changing the circle code for the item in Studio. Wierd. I’ll have another look tonight.
You define the ‘stroke ‘ that’s only the outside ring right?
I see you use the entities, like climate… person etc.
My climate does not report on / off, but states are auto / heat, is there a way to look on that type of a state?
If you want to display only the ON state, I think it is better to create a new template for specific entities and not to manipulate the circle template. Because with that template you have to fix it in extra styles as well. For example, I have a small icon for my office button when the laptop is on, otherwise it is not displayed.
Sorry, but those files aren’t just for copy and paste. It’s just a preview of how my dashboard is done, there are a lot of custom template sensors and other helpers and many added custom cards from the community. 
That can work to for me….
I’m only looking for a easy to see indicator that my climate is on auto or on Heating.
Now I only have the climate button, the state says Auto or Heat, but it’s al in grey. ( I think because my climate don’t have states on /off?
Where can add a template icon like yourse on the climate card
In this template I used for variables.state_on attributes hvac_action from entity, specifically state_on only when heating. To display the state I have a different background for the button and color for the state.
radiator:
template:
- base
- circle
variables:
state: >
[[[
if (entity) {
return entity.attributes.hvac_action
}
]]]
state_on: >
[[[
return ['heating'].indexOf(!entity || entity.attributes.hvac_action) !==-1;
]]]
circle_input: >
[[[
if (entity) {
return entity.state === 'idle'
? Math.round(entity.attributes.current_temperature).toString()
: entity.attributes.hvac_action === "heating"
? Math.round(entity.attributes.temperature).toString()
: Math.round(entity.attributes.current_temperature).toString();
}
]]]
circle_input_unit: '°C'
state_display: >
[[[ return variables.state === 'idle' || variables.state === 'heat' ? 'Inactive' : 'Heating'; ]]]
styles:
card:
- background-color: >
[[[
return variables.state === 'heating'
? 'rgba(255, 255, 255, 0.85)'
: 'rgba(115, 115, 115, 0.25)';
]]]
- color: >
[[[
return variables.state === 'heating'
? '#4b5254'
: '#97989c';
]]]
Yes, stroke = ring. The active states are defined via variables.state_on , which you’ll find in the base template. I do the same as suggested by VietNgoc, if my ideas of a certain design are very specific and decouple the code.
Maybe a stupid question 
But you make a new template called radiator, in that template you can refer to other templates as well? Like base and circle?
Then when you make the card you choose radiator as template?
template above in post and here is button in grid
- type: custom:button-card
entity: climate.office_thermostat
name: Heater
template:
- radiator
- icon_climate
Thank you, I will try this when I’m home 
Since i moved my Hass to a new server and moved my docker-install suddenly the title font has changed and size is off.
Anybody a clue where to look to fix it?
sensor:
- unique_id: wide_timeclock
state: template
attributes:
hour: >
{% set hours = now().strftime('%H') %} {{ hours }}
minutes: >
{% set minutes = now().strftime('%M') %} {{ minutes}}
day: >
{{ states.sensor.day_en.state }}
date: >
{{'📆'}} {{ states.sensor.date_en.state }}
lunar: >
{{'🌚'}} {{ states.calendar.lunar.attributes.message | replace("/", ".") }}
events: >
{%- set midnight = today_at() %}
{%- set event = state_attr('calendar.ceske_statni_svatky', 'start_time') | as_datetime | as_local %}
{%- set delta = event - midnight %}
{%- if delta.days == 0 %}
{{ state_attr('calendar.ceske_statni_svatky', 'message') }}
{%- endif %}
{% set time = now().hour %}
{%- if time <= 1 -%} {{'💤'}} Good night
{%- elif time <= 3 -%} {{'😴'}} Good night
{%- elif time <= 5 -%} {{'😪'}} Good night
{%- elif time <= 7 -%} {{'🧠'}} Good morning
{%- elif time <= 9 -%} {{'🤟'}} Good morning
{%- elif time <= 10 -%} {{'😘'}} Good morning
{%- elif time <= 13 -%} {{'😍'}} Good day
{%- elif time <= 15 -%} {{'😏'}} Good day
{%- elif time <= 17 -%} {{'🖖'}} Good day
{%- elif time <= 19 -%} {{'🤩'}} Good evening
{%- elif time <= 22 -%} {{'🤗'}} Good evening
{%- elif time <= 23 -%} {{'🤫'}} Good night
{%- else %} {{'🤫'}} Good night
{%- endif -%}
template:
wide_timeclock:
# aspect_ratio: 2/1
show_state: false
show_name: false
show_label: false
show_icon: false
tap_action: !include /config/UI/popup/calendar.yaml
double_tap_action:
action: block
hold_action:
action: block
custom_fields:
day: >
[[[ return entity.attributes.day; ]]]
date: >
[[[ return entity.attributes.date; ]]]
lunar: >
[[[ return entity.attributes.lunar; ]]]
events: >
[[[ return entity.attributes.events; ]]]
hour: >
[[[ return entity.attributes.hour; ]]]
minute: >
[[[ return entity.attributes.minutes; ]]]
styles:
grid:
- grid-template-areas: |
"hour events "
"hour date "
"minute lunar "
"minute day "
- grid-template-columns: 1fr 1fr
- grid-template-rows: repeat(4, min-content)
- gap: 0%
- margin: 0
card:
- padding: 0
extra_styles: |
#card {
padding: 0;
border-width: 0;
}
#container {
justify-items: flex-start;
align-items: self-end;
color: #6b6b6b;
font-family: poppins;
font-weight: 600;
letter-spacing: 1.5px;
}
#hour, #minute {
justify-self: flex-end;
font-weight: 800;
line-height: 90%;
letter-spacing: 2px;
font-family: Futura;
padding-right: 0.5vw;
}
#hour {
font-size: 3.5em;
color: #848e93 !important;
}
#minute {
font-size: 3.3em;
color: #9c9ba3 !important;
}
#day {
font-size: 1.3em;
text-transform: uppercase;
font-weight: 600;
font-family: futura;
letter-spacing: 1.5px;
color: #848e93;
}
button:
cards:
- type: custom:button-card
entity: sensor.template_wide_timeclock
template:
- wide_timeclock
I have the same problem, see my post a bit up in this community!
Anyone?
Can you share the sidebar code for calender and person with pic? 
Can someone tell me where to icons used in the ‘icon.yamel’ are stored?
I want to add some other icons as well, but I have no clue where to start, there not mdi icons as far as I can see.
Do I need to download them first?
Buttom_card_template map you can find icon.yaml, add code inside the file