The icon doesn’t get resized any longer. “size:” is ignored, and different sizes of the button don’t change anything. The icon is always displayed very small.
I had this issue last night upgrading to 0.110 and the resource for this custom button. After clearing the cache of my browser and resetting my iOS companion app’s frontend cache all custom buttons and icons were sized correctly.
Many thanks! Clearing the cache really did the job. I should have thought of that.
Thanks David. Do you see the same behavior with the instructions as I reported? It’s not a problem the links don’t work, it just makes me think something isn’t configured correctly.
The links never work in HACS, you have to go to the repository directly.
Thanks! Cheers.
Oh, and THANKS for all your hard work on this and making it possible!
If you click on the plugin all it does is display the actual code for the card. As romrider said you need to go to the repo.
I don’t know what’s wrong. But the icon does not enlarge.
- type: picture-elements
image: /local/images/transparent_1to1.png
style: |
ha-card {
border-radius: 15px;
}
elements:
- type: custom:mini-graph-card
style:
top: 40%
left: 50%
width: 100%
height: 80%
translate: translate(-50%, -50%)
'--paper-card-background-color': 'rgba(0, 0, 0, 0.0)'
'--ha-card-background': "rgba(0, 0, 0, 0.0)"
'--ha-card-box-shadow': 'none'
z-index: 3
pointer-events: none
entities:
- sensor.energia_mensal_alta
group: true
points_per_hour: 1
hour24: true
line_color: '#4ba6ed'
line_width: 10
hours_to_show: 24
update_interval: 600
show:
name: false
icon: false
state: false
points: false
legend: false
average: false
extrema: false
labels: false
fill: false
labels_secondary: false
name_adaptive_color: false
icon_adaptive_color: false
- type: custom:button-card
style:
top: 50%
left: 50%
width: 100%
translate: translate(-50%, -50%)
aspect_ratio: 1/1
entity: sensor.energia_mensal_alta
name: teste
icon: 'mdi:flash'
color: var(--paper-item-icon-color)
show_name: true
show_label: true
show_icon: true
show_last_changed: true
size: 70%
tap_action:
action: more-info
haptic: light
styles:
icon:
- opacity: 0.3
- width: 100%
img_cell:
- top: 0%
- left: 30%
- position: absolute
- z-index: 2
grid:
- grid-template-areas: '"info info" "n n" "l l"'
- grid-template-columns: 40% 1fr
- grid-template-rows: 1fr min-content min-content
- position: relative
card:
- padding: 10px
- z-index: 1
name:
- justify-self: start
- align-self: end
- font-weight: bold
- font-family: Helvetica
- font-size: 12px
- text-align: start
- background-image: linear-gradient(to right, white 0%, white 80%, rgba(0,0,0,0))
- -webkit-background-clip: text
- -webkit-text-fill-color: transparent
- position: relative
- display: inline-block
- width: 100%
- align-content: start
- text-align: start
- text-overflow: unset
- z-index: 5
label:
- justify-self: start
- align-self: end
- font-weight: bold
- font-family: Helvetica
- font-size: 12px
- text-align: start
- background-image: linear-gradient(to right, var(--paper-item-icon-color) 0%, var(--paper-item-icon-color) 80%, rgba(0,0,0,0))
- -webkit-background-clip: text
- -webkit-text-fill-color: transparent
- position: relative
- display: inline-block
- width: 100%
- align-content: start
- text-align: start
- text-overflow: unset
- z-index: 5
custom_fields:
info:
- align-self: start
- width: 40%
- z-index: 5
custom_fields:
info: >
[[[
var entity_id = (entity === undefined) ? 'Invalid Entity' : entity.entity_id;
var statestr = (entity === undefined || entity.state === undefined) ? null : entity.state;
var units = (statestr && entity.attributes.unit_of_measurement) ? entity.attributes.unit_of_measurement : null;
var date = (statestr && entity.attributes.device_class === 'timestamp') ? new Date(statestr) : null;
var value;
if (statestr && date === null) {
if (statestr.split('.').length - 1 <= 1){
var test = parseFloat(parseFloat(statestr).toFixed(2));
value = (isNaN(test)) ? null : test;
// test if units are in the state because some sensors are stupid. Looking
// at you synology.
const expr = /[^-.0-9]+/;
var has_units = expr.test(statestr.trim());
// console.log(`${entity_id}: "${statestr}" ${matches}`);
if (value && has_units)
units = statestr.replace(/[.0-9]+/, '');
}
}
// console.log(`${entity_id}: ${statestr}, ${units}, ${date}, ${value}`);
const length = 50;
const width = 3;
var radius = length / 2;
if (date){
let now = new Date();
var tdelta = Math.floor((now - date)/1000);
// console.log(`${entity_id}: ${tdelta}`);
function plural(descriptor, divisor){
var ret = Math.floor(tdelta/divisor);
return (ret == 1) ? [ret, descriptor] : [ret, `${descriptor}s`];
}
var values;
if (tdelta < 60)
values = plural('second', 1);
else if (tdelta < 60 * 60)
values = plural('minute', 60);
else if (tdelta < 60 * 60 * 24)
values = plural('hour', 60 * 60);
else if (tdelta < 7 * 60 * 60 * 24)
values = plural('day', 60 * 60 * 24);
else
values = plural('week', 7 * 60 * 60 * 24);
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" fill="#4ba6ed" />
<text x="50%" y="43%" fill="var(--paper-card-background-color)" font-weight="bold" font-size="14" text-anchor="middle" alignment-baseline="middle">${values[0]}<tspan x="50%" dy="1.2em" font-size="10" font-weight="normal" >${values[1]}</tspan>
</text>
</svg>
`;
}
else if (value && units && units === '%') {
radius = (length - 3) / 2;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" fill="none" stroke="var(--paper-item-icon-color)" opacity="0.5" stroke-width="${width}" />
<circle style="
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - value / 100 * circumference};
"
id="c_brightness" cx="25" cy="25" r="${radius}" stroke="var(--paper-item-icon-active-color)" stroke-width="${width}" fill="none" stroke-linecap="round" />
<text x="50%" y="54%" fill="var(--primary-text-color)" font-weight="bold" font-size="14" text-anchor="middle" alignment-baseline="middle">${value}<tspan font-size="10" font-weight="normal" >%</tspan>
</text>
</svg>
`;
}
else if (value && units && units.includes('°')) {
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" fill="#4ba6ed" />
<text x="50%" y="54%" fill="var(--paper-card-background-color)" font-weight="bold" font-size="14" text-anchor="middle" alignment-baseline="middle">${value}<tspan font-size="10" font-weight="normal" >${units}</tspan>
</text>
</svg>
`;
}
else if (value && units && units.length > 1) {
var y = (String(value).length > units.length) ? "50%" : "43%";
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" fill="#4ba6ed" />
<text x="50%" y="${y}" fill="var(--paper-card-background-color)" font-weight="bold" font-size="14" text-anchor="middle" alignment-baseline="middle">${value}<tspan x="50%" dy="1.2em" font-size="10" font-weight="normal" >${units}</tspan>
</text>
</svg>
`;
}
else if (value) {
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" fill="#4ba6ed" />
<text x="50%" y="54%" fill="var(--paper-card-background-color)" font-weight="bold" font-size="14" text-anchor="middle" alignment-baseline="middle">${value}<tspan font-size="10" font-weight="normal" >${units}</tspan>
</text>
</svg>
`;
}
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" fill="#4ba6ed" />
<text x="50%" y="54%" fill="var(--paper-card-background-color)" font-weight="bold" font-size="14" text-anchor="middle" alignment-baseline="middle">${statestr}
</text>
</svg>
`;
]]]
What I changed was only the variables such as icon, entity and color.
It worked.
Install “lovelace-button-card” again via the HACS component and updated a variable “–mdc-icon-size”…
Thank you for sharing. 
Hi, I need a little help.
I have gate, it takes 20s to open/close. I would like to indicate this process on the frontend.
So when I press the button the icon should blink for 20 sec then change to steady on or off.
Is it possible?
Thank you
I need this too. 
Have a button for my gate. When I press the button a switch entity toggle 1 sec impulse to one relay and the gate open or close. I have one door sensor which is show that the gate state is open or closed. Is it possible merge this two entity and this button do the opening or closing and show the gate state with color (green-open, red-closed)?
you can merge them into one button:
entity: binary_sensor.test_motion4_6
show_icon: true
show_state: true
state:
- color: 'rgb(237, 202, 68)'
icon: 'mdi:door-open'
size: 50px
value: 'on'
- color: 'rgb(70, 116, 156)'
icon: 'mdi:door-closed'
size: 50px
value: 'off'
styles:
card:
- height: 100px
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.kiskapu
type: 'custom:button-card'
Perfect, now need the blinking while opening.
I made an input_boolean to support this.
entity: input_boolean.kapu
show_icon: true
show_state: false
name: Kapu
show_label: true
label: |
[[[
if (states['input_boolean.kapu'].state == "On")
return "Zárva";
return "Nyitva";
]]]
state:
- color: 'rgb(237, 202, 68)'
icon: 'mdi:door-open'
value: 'on'
- color: 'rgb(70, 116, 156)'
icon: 'mdi:door-closed'
value: 'off'
styles:
card:
- height: 100px
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.kapu
type: 'custom:button-card'
and do an automation, which triggered by the gate switch (switch.kapu).
And this automation just set the input_boolean to on and off for 20sec
This will change the door icon to open/close accordingly.
Can you send this automation? How to repeat the on off for 20sec?
Not too elegant
- id: '1591642447039'
alias: Kapu gomb villog
description: ''
trigger:
- entity_id: switch.kapu
platform: state
to: 'on'
condition:[]
action:
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_off
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service: input_boolean.turn_on
- delay: 00:00:00.5
- data: {}
entity_id: input_boolean.kapu
service_template: "input_boolean.turn_{{ states('binary_sensor.test_motion4_2') }}"
In the last action I set the input boolean to the real state of the gate
Ohh I see. Thank You. 
)
Have you updated your cards to reflect this change?
I’m wondering if the juice is worth the squeeze?
Have problem with the last action.
Get this error:
Message malformed: Service input_boolean.turn_{{ states('binary_sensor.0x00158d0003fa5728_contact') }} does not match format <domain>.<name> for dictionary value @ data['action'][48]['service']
You can’t jinja template in that field. In fact, jinja templating isn’t allowed in the button card anywhere.
EDIT: My mistake, that’s part of his script. Disregard.