Looks like the problem is with FF 66.0.3 on Ubuntu. In Chrome the icons show up.
This is happening on all buttons, except the one i have with styles: defined.
And yes, i hammered CTRL-F5 multiple times and restarted FF.
Ok so finally i have remade all the code and it is like this:
- entity: light.luz_sala_da_familia
name: SALA DE FAMILIA
icon: 'mdi:ceiling-light'
size: 100%
show_entity_picture: true
template: cartao
tap_action:
action: toggle
dbltap_action:
action: more-info
state:
- value: 'on'
styles:
name:
- width: 100%
- background-color: yellow
- value: 'off'
entity_picture: /local/images/EscritorioOFF.jpg
styles:
name:
- width: 100%
- background-color: grey
it is working as expected !!
the only thing missing for me is really to be possible to âfreezeâ the card size and image size. can someone please support?
Please be patient 
Someone will answer, or I will, in time.
1 Like
I donât have this issue with FF67.0. Could you open an issue on github if itâs still hapenning on the latest version? Please and also add a working config there if possible. Thanks 
PS: I hate CSS 
1 Like
i made it !
i share so anyone can use
cards:
- name: ILUMINAĂĂO QUARTOS
template: header_marcelo
type: 'custom:button-card'
- cards:
- entity: light.luz_quarto_da_maria
name: QUARTO MARIA
size: 100%
template: cartao
type: 'custom:button-card'
state:
- value: 'on'
styles:
name:
- width: 100%
- color: green
icon:
- color: black
card:
- height: 150px
- width: 150px
- value: 'off'
entity_picture: /local/images/EscritorioOFF.jpg
styles:
name:
- width: 100%
icon:
- color: black
card:
- height: 150px
- width: 150px
- entity: light.luz_sala_da_familia
template: cartao
name: SALA DE FAMILIA
icon: 'mdi:ceiling-light'
show_entity_picture: true
size: 100%
tap_action:
action: toggle
dbltap_action:
action: more-info
state:
- value: 'on'
styles:
name:
- width: 100%
- color: green
icon:
- color: black
card:
- height: 150px
- width: 150px
- value: 'off'
entity_picture: /local/images/EscritorioOFF.jpg
styles:
card:
- height: 150px
- width: 150px
icon:
- color: black
type: 'custom:button-card'
- color: dark grey
color_type: card
dbltap_action:
action: more-info
entity: light.luz_sala_da_familiaXX
icon: 'mdi:ceiling-light'
name: SUITE
state:
- value: 'on'
styles:
name:
- width: 100%
- color: green
icon:
- color: black
card:
- height: 150px
- width: 150px
- value: 'off'
entity_picture: /local/images/EscritorioOFF.jpg
styles:
card:
- height: 150px
- width: 150px
icon:
- color: black
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
1 Like
At home on FF 67.0 everything works as expected.
I think i need to drop the old Ubuntu 14.04 at work.
Sorry for the confusion.
1 Like
Absolutely! Iâm still working on fine-tuning a couple of things but definitely plan to post my full Lovelace config when itâs done, which should be pretty soon!
1 Like
hi there
i finally setupped fixed size for card !
unfortunelly the setup works fine on my phone with all icons well aligned.
altough on a PC it looks like this
maybe its due to size in px ?
how can i setup better?
Use the new aspect_ratio option instead of setting width and height, especially for square buttons.
Fixed width and height in pixels will have this effect as it doesnât scale based on the screen size, itâs not a bug itâs just how CSS works.
I used the layout card to make the left column 40% of the width and the right one 60%. I then added a vertical stack with first a button card for the title (which is a on/off toggle button for the group), then another row with a horizontal stack which holds either 3 or 2 buttons. For the garden I only needed 2 buttons, but had space for 3, so then I added a blank card as well, making sure the other buttons are the exact same size.
I did this 3 times, each for two rooms.
And yes, it does fit on my phone perfectly. Do have an iPhone X though, donât think it works properly on a small screen like an iPhone 5. The buttons would become too small and you would need to work with maximum 4 next to each other.
thanks
like this?
- name: ILUMINAĂĂO QUARTOS
template: header_marcelo
type: 'custom:button-card'
- cards:
- entity: light.luz_quarto_da_maria
aspect_ratio: 1/1
name: QUARTO MARIA
size: 100%
state:
i cannot put the card larger, only higherâŠ
tried for example 1/2
2/1 would be twice the width compared to the height, that would make the card more large than high. You should read the documentation on github, everything is there and documented.
Nice work! Havent used the layout card myself yet, so this is reason to explore that for sure.
Would it be too much to ask if youâd post your config for that so I can try and rebuild that with my entities, but have the framework prebuilt âŠ
thanks if you would!
Hi, thanks for the aspect ratio, first impression seems fine.
Have a question: would you still advice to use empty cards to fill the row evenly, or can we take those out and let the aspect ratio do the work?
secondly: Your docs say we can leave out the size of icon and button, because it automatically fills the space, but when needing a special size for the icon, could we still use the %? That way it would still by dynamically sized, but we can set the ratio of the icon to the button?
Ive tried that, but it has some unexpected results:
both use this template:
button_picture:
size: 90%
show_state: false
show_label: false
show_name: false
show_entity_picture: true
color_type: card
aspect_ratio: 1/1
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
# - width: 85px
# - height: 85px
state:
- value: 'on'
color: '#F0C209'
id: on-picture
- value: 'off'
color: '#555B65'
id: off-picture
but the size of the buttons, well, the images speak for themselves⊠Shouldnât they be the same size, independent of the format of the image on the buttons?
thanks!
It seems the 1.10 version broke my icon styling, the grid style doesnât do much for me now (I use anchors btw)
It is almost exactly the same as the homekit example in the docs on github. I have tried removing the lines I added so it would be exactly as in the example but to no avail.
Old:
As you can see icon is on the left.
After updating:
I use this code:
light_button_style: &lightbuttonstyle
styles:
card:
- border-radius: 12px
- width: 105px
- height: 105px
- --paper-card-background-color: var(--homekit-white)
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
And the button is:
- type: "custom:button-card"
entity: light.woonkamer_led_lampen
name: LEDs
icon: "mdi:led-strip"
label_template: >
var bri = Math.round(states['light.woonkamer_led_lampen'].attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
color: auto
size: 30%
<<: *lightbuttonstyle
<<: *showboth
<<: *lightbuttonstate
<<: *lightbuttonactions
(the *showboth are only lines that tell to show state/label/name yes or no, the *lightbuttonactions refer to the actions on what happens to it when you press it. I donât think it is relevant to post that code as well :P)
I have used this code for a while now and it has worked great, but it seems something has changed and I canât seem to find why it shouldnât work. It does say something about the 1/1 aspect ratio and that you could bypass the size%, but it doesnât say it should be done. Didnât find changes to the grid either (srry if I misunderstood some stuff, English is not my native language)
Anyways thanks for all your hard work @RomRider this card is the most used card in my setup and I absolutely love it!
Edit: I added margin-right: 58px to the img_cell: and the icon is at the same spot again, however it feels a bit hacky using this much pixels to move an icon around no? I am not an expert in css so I wouldnât know. It looks to be back to normal again now.
@jimz011 what does your grid look like when you use F12? I think if you use one of the layouts you can get your style without that âhackâ.
It says: CSS Grid is not in use on this page
I donât know if it is a hack, I am crap at css, but it feels a bit hacky to me. But it seems to work fine, though spacing on larger screens is a bit off. They donât align like they do on a small screen.
Iâll see if I can replicate your button with a layout, might be a bit as Iâm transitioning into the ratio versions.
Going to try that as well, but just replacing my code with aspect ratioâs make it really look bad 
but no worries. My temporary solution will work perfectly fine, my wife wonât notice the difference which is most important. She already has to cope with my urge of changing the setup every month or sometimes even do radical changes in a week 
.
Once I find the time to get to it I definitely will switch to better solutions like the aspect_ratio. But my css is a massive mess, so I will probably do that at the same time.
Off to bed now, long day ahead. Thnx btw!
FYI aspect ratio appears to not work with layouts, or at least the icon_state layout.