@Mattias_Persson first of all, FANTASTIC design, congrats !
Now, I am curious about this: how did you add this padding outside the entire component? i see they are not added at the button-card level, but seems to be on the most “outer card” there is…
is it added at #root? .column? i could not figure out how this was done? looks neat!
Do you mind explaining how you did this? Thanks !
Do you know by any chance if we can use the state icon of the home alarm from home assistant (green/orange/red with the shield home icon and the state)? I searched for it but can’t get the image from that card into something like this.
Hi! I have included the custom_icons.js but I am not sure what should be the output of this command. What am I missing to achieve the screenshot provided by Mattias?
P.S I don’t know if everything in the codes are applicable to me or if there are pre-requisites before I can make them work
tap_action: !include popup/popup_3f_tv_remote.yaml
hold_action:
action: more-info
custom_fields:
icon_tv: &icon_tv >
[[[ const boolean = states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state;
const style = '<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>';
const path = '<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"/>';
const gradient = '<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>';
if (entity.state === 'off' && boolean === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path class="animate_off" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on' && boolean === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/><path class="animate_on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on' && boolean === 'on') { return `<svg viewBox="0 0 50 50"> ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
else if (entity.state === 'off' && boolean === 'on') { return `<svg viewBox="0 0 50 50"> ${path} </svg>`; } ]]]
styles: &icon_tv_styles
custom_fields:
icon_tv:
[fill: "[[[ return entity.state === 'on' ? '#616161' : '#9da0a2'; ]]]",
top: 7%, left: 10.7%, width: 3.5vw, position: absolute]
template: ['base', 'loader']
Output:
Hi @Mattias_Persson, i have downloaded your Hass-config-master. I don’t know anything and I start from scratch. What I need to study to modify your configuration and adapt to my entity, and translate everything in my language?
Hi
Can you provide the code with the media player?
Thank you.
it’s not my code, but partly used from this part:
my code still not working i try to fix it… 
this is the error from the card
ButtonCardJSTemplateError: TypeError: Cannot read property ‘state’ of undefined in ‘if (states[entity.entity_id.replace(entity.entity_id.split(’.’)[0], ‘input_boolean’)].state === ‘o…’
Anyone solved the problem. it is not working for me neither.
Yes it will
I bet you can. I don’t have an alarm though.
It takes your media player and looks for an input boolean with the same name, so it can show a spinning loader while waiting for a state change. ex for media_player.samsung_tv_remote, make sure you’ve created input_boolean.samsung_tv_remote.
Loved the thing you’ve done here. Looks awesome.
Now the real question, I’m a real beginner in the home assistant project and could you or someone in the topic give me a hints on how to add this to my HA configuration, I know that after adding the visuals I have to change the entities and everything just a hint for the visual style.
Thanks in advance and keep doing this you really have everything.
yep just fixed… than i read your post 
thanks a lot
May I know how can I remove the other icon boxed in black? I already removed the customized icons but to no avail.
- type: custom:button-card
entity: media_player.3f_tv
triggers_update:
['switch.3f_br_switch_broadlink_sidelight']
style:
top: 37.9%
left: 41.31%
width: 10%
tap_action:
action: toggle
hold_action: !include popup/popup_3f_tv_remote.yaml
custom_fields:
icon_tv: >
[[[ if (entity.state === 'on') { return '<svg viewBox="0 0 50 50"> <style>@keyframes animate{50%{transform: translateY(0);}100%{transform: translateY(-45%);}}.animate{animation: animate 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}</style>
<g style="clip-path: url(#mask);"><g class="animate"><path fill="#00aa9e" d="M49.2 38.9l-75.6-25.1v7.4l75.6 25.2z"/><path fill="#f3c202" d="M49.2 46.4l-75.6-25.2v7.5l75.6 25.1z"/><path fill="#326db3" d="M49.2 53.8l-75.6-25.1V51l75.6 25.1zm0-22.3L-26.4 6.4v7.4l75.6 25.1z"/></g></g>
<defs><clipPath id="mask"><path d="M47.5 33.2c-.5-2.2-3.9-3.5-9.1-3.9-3.8-.3-7.5.6-11.1 1.9l-.6.2v-5.7l-5.7.8-4.6 1.6L6 31.9h-.1c-1.9.7-3.8 2.2-3.7 4.2.1 2.1 4.7 2.6 8.2 3.2 3.3.6 6.2.2 8.9-.7l7.3 4.8L33 41l10.7-4h.1c2.8-1 4-2.5 3.7-3.8zm-31.3 2l-3.6 1.3c-2.2.8-4.1-1.1-2.1-1.9l1.7-.6 7.2-2.7v2.8l-3.2 1.1zm22.5-1.1l-1.9.7-10.2 3.7V36l6.5-2.4 3.8-1.3c4-.9 5.6.5 1.8 1.8z"/></clipPath></defs><path fill="#de0029" d="M26.7 14.6v28.7l-7.3-2.5V7.1l9.3 2.6c6 1.7 9.6 5 9.6 10.7-.1 6.7-3 9.4-8.7 7.6V14.9c-.1-1.6-2.9-1.7-2.9-.3h0z"/></svg>'; }
else { return '<svg viewBox="0 0 50 50"><path fill="#9da0a2" d="M43.8 37h-.1l-10.6 4-4.2 1.6v-4.9l8-2.9 1.9-.7c3.8-1.3 2.2-2.7-1.8-1.9l-3.8 1.3-4.3 1.6v-4.5c3.1-1 6.3-1.6 9.5-1.4 5.3.4 8.7 1.6 9.1 3.9.3 1.4-.9 2.9-3.7 3.9zm-26.7-2.1l-.9.3-3.6 1.3c-2.2.8-4.1-1.1-2.1-1.9l1.7-.6 5-1.9v-4.2l-.6.2L6 31.9h-.1c-1.9.7-3.8 2.2-3.7 4.2.1 2.1 4.7 2.6 8.2 3.2 2.4.4 4.6.3 6.7-.1v-4.3zm12.4-20V28c5.7 1.7 8.7-.9 8.7-7.6.1-5.7-3.6-9-9.6-10.7l-9.3-2.6v33.8l7.2 2.5.1.1V14.6c.1-1.4 2.9-1.3 2.9.3z"/></svg>'; } ]]]
styles:
custom_fields:
icon_tv:
[top: 7%, left: 10%, width: 3.5vw, position: absolute]
template: ['base', 'loader']
Did you include button_card_templates.yaml?
nice! thank you! 
I have copied your button_card_templates.yaml.
Per checking, it is included there but it is not responding in the front end.
It went OK after placing it in ui-lovelace.yaml per your advise.
I am also curious about that.
Hi
I’ve tried and I managed to add, after seeing the files I understand a little more about this, but I get so many errors for the custom card saying that card does not exist even if add them via HACS, and for the kiosk mode I’m was not able to set it.
I’m still trying to do this, and if I can I will reply to you how to do it.