Okay, I’ve checked. It’s because they’ve change the way ha-icon works in core…
To fix this, in every style of an <ha-icon> element, replace height: 14px; with --mdc-icon-size: 14px; (or another value) and you’ll be good to go.
Is there a way to change the state of a button? For instance I have a timer, when it’s not in use it shows “idle”. Is there a way to make my button show “timer off” when state = “idle”?
Something like this will probably do the trick:
state_display: '[[[ if (entity.state === "idle") return "timer off"; else return null ]]]'
1 Like
I have a bit of trouble aligning my the text on my button. Could i get some help with the Grid Template please?
This is how it currently looks:
However, i would like to have the 4.0min on the left side, and at the same height on the right side the 7.0 LvL.
Any tipps on how to do that?
This is the code
type: 'custom:button-card'
entity: fan.schlafzimmer
icon: 'hass:fan'
custom_fields:
timer:
card:
type: entity
entity: input_number.bedroom_fantime
icon: ' '
name: ' '
unit: min
style: |
ha-card {
box-shadow: none;
}
speed:
card:
type: entity
entity: input_number.livingroom_fanspeed
icon: ' '
name: ' '
unit: LvL
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
timer:
- filter: opacity(50%)
- overflow: unset
speed:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "s" "timer" "speed"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
´``change your grid to
grid:
- grid-template-areas: '"i i" "n n" "s s" "timer speed"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content
1 Like
Amazing, thank you… now time to study it and understand it 
There’s a whole section in the help that covers grid
I was trying to read that, but after 20min its still chinese to me. I will try again with the example and play around.
just look at the pictures. Spells out how grid-template-areas works.
The icons themselves work fine, it is the wording of the state that follows that doesnt work. The button card literature on custom fields still shows it the way I have it configured and hasn’t changed.
There seems to be an issue in this part that stops it from working as example:
${states[‘device_tracker.life360_ben’].attributes.battery}%
Tried the code from @benm7 with your changes but still not working here (custom button card version 3.3.5) Could you share the code you got it working with?
I changed as you mentioned for example and have added --mdc-icon-size to my themes with 14px (themes reloaded 
)
i can confirm that i think just like @benm7 mentioned above that its in the state part
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="; height: var(--mdc-icon-size); color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.lkr_to_work_waze'].state}mins</span>`
]]]
The issue comes from the icon taking full width pushing the text out of the card. So instead of saying my solution isn’t the proper one, please try it…
<ha-icon style="--mdc-icon-size: 14px; ...
@lubbertkramer, your syntax is wrong, you didn’t read my post 
see above.
I did read but not fully understood what you meant as i can see now. But when i change the code into the code you propose it’s still giving a strange look and feel with blowing the icon size
- type: 'custom:button-card'
entity: person.lubbert_kramer
entity_picture: /local/test.png
size: 60%
color: auto
spin: false
show_name: false
show_state: true
show_label: false
show_icon: true
show_last_changed: false
show_entity_picture: true
tap_action:
action: more-info
haptic: light
aspect_ratio: 2/1
margin-right: 20px
label: ' '
off_icon_color: gray
off_name_color: gray
off_state_color: gray
styles:
card:
- border-radius: 12px
- --paper-card-background-color: var(--homekit)
icon:
- grid-column: 1
- grid-row: 1 / 4
label:
- color: gray
- font-size: 11px
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i s" "i battery" "i home" "i work"'
- grid-template-columns: 50% 50%
- grid-template-rows: 25% 25% 25% 25%
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 13px
entity_picture:
- height: 60px
- width: 60px
- border-radius: 100%
custom_fields:
battery:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
home:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
work:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
custom_fields:
battery: >
[[[
return `<ha-icon
icon="mdi:battery"
style="--mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.in2023_battery_level'].state}%</span>`
]]]
home: >
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="--mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.in2023_battery_level'].state}mins</span>`
]]]
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="--mdc-icon-size: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.in2023_battery_level'].state}mins</span>`
]]]
state:
- value: "not_home"
styles:
card:
- opacity: 0.6
entity_picture:
- border: 1px solid var(--secondary-text-color)
- value: "home"
styles:
entity_picture:
- border: 1px solid var(--primary-line-color)
- value: "Ben Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Jess Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Poppy and Lola Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
- value: "GPa and GMa Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
Edit 1:
Also on the default HA theme the same problem to see if the problem was in the theme file
Edit 2:
Changing the style back to height it gives me the correct height for the icons but still the same error of no text before the icons just like @benm7
short code example:
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.in2023_battery_level'].state}mins</span>`
]]]
My theme:
Default theme:
Apologies RomRider, not my intent to ignore your advice, just wasn’t entirely sure how to apply your guidance. The code snippet helped immensely, and it is working again now thanks! The formatting is different now and is condensed between icon and text, plus icon is shifted left, but I’ll play around with it to get it similar to what I had it now it shows everything.
Before:
After:
Revised code for @lubbertkramer 
- type: 'custom:button-card' entity: person.ben entity_picture: /local/ben6.png size: 60% color: auto spin: false show_name: false show_state: true show_label: false show_icon: true show_last_changed: false show_entity_picture: true tap_action: action: more-info haptic: light aspect_ratio: 2/1 margin-right: 20px label: ' ' off_icon_color: gray off_name_color: gray off_state_color: gray styles: card: - border-radius: 12px - --paper-card-background-color: var(--homekit) icon: - grid-column: 1 - grid-row: 1 / 4 label: - color: gray - font-size: 11px - padding: 0px 10px - justify-self: start state: - font-size: 12px - padding: 0px 10px - justify-self: start - text-transform: capitalize - font-weight: bold - padding-left: 10px - color: var(--primary-text-color) grid: - grid-template-areas: '"i s" "i battery" "i home" "i work"' - grid-template-columns: 50% 50% - grid-template-rows: 25% 25% 25% 25% img_cell: - align-self: start - text-align: start name: - justify-self: start - padding-left: 10px - font-weight: bold - font-size: 13px entity_picture: - height: 60px - width: 60px - border-radius: 100% custom_fields: battery: - align-self: start - justify-self: start - font-size: 12px - color: var(--secondary-text-color) home: - align-self: start - justify-self: start - font-size: 12px - color: var(--secondary-text-color) work: - align-self: start - justify-self: start - font-size: 12px - color: var(--secondary-text-color) custom_fields: battery: > [[[ if (states['device_tracker.life360_ben'].attributes.battery_charging === false) return `<ha-icon icon="mdi:battery" style="; --mdc-icon-size: 14px; color: var(--primary-line-color);"> </ha-icon><span>${states['device_tracker.life360_ben'].attributes.battery}%</span>` else return `<ha-icon icon="mdi:battery-charging" style="; --mdc-icon-size: 14px; color: var(--primary-line-color);"> </ha-icon><span>${states['device_tracker.life360_ben'].attributes.battery}%</span>` ]]] home: > [[[ return `<ha-icon icon="mdi:home-import-outline" style="; --mdc-icon-size: 14px; color: var(--primary-line-color);"> </ha-icon><span>${states['sensor.ben_to_home_waze'].state}mins</span>` ]]] work: > [[[ return `<ha-icon icon="mdi:car" style="; --mdc-icon-size: 14px; color: var(--primary-line-color);"> </ha-icon><span>${states['sensor.ben_to_work_waze'].state}mins</span>` ]]] state: - value: "not_home" styles: card: - opacity: 0.6 entity_picture: - border: 1px solid var(--secondary-text-color) - value: "home" styles: entity_picture: - border: 1px solid var(--primary-line-color) - value: "Ben Work" styles: entity_picture: - border: 1px solid var(--secondary-line-color) - value: "Jess Work" styles: entity_picture: - border: 1px solid var(--secondary-line-color) - value: "Poppy and Lola Home" styles: entity_picture: - border: 1px solid var(--tertiary-line-color) - value: "GPa and GMa Home" styles: entity_picture: - border: 1px solid var(--tertiary-line-color)
3 Likes
Hi Guys ,
first post here and thanks to all who contribute . I’ve been trying to get my head around the button card and CSS grids and I’ve found 2 things that help me , maybe it can help someone else .
Using inspector in your browser can show you the grids and details of everything you place
and this tutorial . not sure if most of it is applicable but you learn quite a bit
with inspector you can even change your layout mode from mobile layout to screen layout with one click . Great for seeing how your layouts will look on a phone .
Regards
Mark
3 Likes
How can I add buttons on top of a button? Can it be achieved with custom_fields?
Right now I’m using it in a combination of layout-card and 4 buttons, but if I possible I want to convert to a single button
You can add left and right padding on the ha-icon (probably 5px on each side), this should fix both issues.
nvm, didn’t knew I could add cards into custom_fields