Hello Mattias,
As many have said, this is great work, thank you for sharing.
I have gotten a lot of this working over the last week, however, I am really struggling with using my own icons.
Initially I thought it was all working fine as the SVGs I created appear fine in Safari, but in Chrome, Edge, or Firefox the entire button-card disappears if I use any SVG other than your own.
I’ve read through the linked design principles for the mdi’s and also used the linked template from that site, but still, I am unable to get them to display.
The SVGs aren’t animated, and I created them in Adobe Illustrator for iPad. I really hope I’m not missing something painfully obvious, because I’ve been trying to get this fixed for days (nervous laugh).
Below is the code from the button-cards-template.yaml, your icon_climate
appears fine, my icon_simplisafe
only appears in Safari or the iOS apps:
icon_climate:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -10%
- fill: >
[[[ return variables.state === 'heat' || variables.state === 'fan_only' ? '#5daeea' : '#9da0a2'; ]]]
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M36.8 1.2v1.7a5.34 5.34 0 0 1-5.3 5.3H18.4a5.34 5.34 0 0 1-5.3-5.3V1.2c-2.6.4-4.7 2.8-4.7 5.6v36.5c0 3.1 2.6 5.7 5.7 5.7h21.8c3.1 0 5.7-2.6 5.7-5.7V6.8c0-2.8-2.1-5.2-4.8-5.6zm-1.7 35.6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3a9.75 9.75 0 0 1-1.4.6c-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zm0-6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3a9.75 9.75 0 0 1-1.4.6c-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zm0-6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3c-.4.2-.8.4-1.4.6-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zM15.7 1.9v-.8h18.6V3c0 1.5-1.2 2.8-2.8 2.8H18.4c-1.5 0-2.8-1.2-2.8-2.8V1.9z"/>
</svg>
icon_simplisafe:
styles:
custom_fields:
icon:
- width:78%
- margin-left: -10%
custom_fields:
icon: >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_10" x="0px" y="0px" width="33.2px" height="33.13px" viewBox="0 0 33.2 33.13" style="enable-background:new 0 0 33.2 33.13;" xml:space="preserve">
<style type="text/css">
.st0{fill:#616161;}
</style>
<path class="st0" d="M26.44 3.24C18.11-2.73 7.13-0.24 1.92 8.86c-5.35 10.36 1.04 22.56 12.6 24.16 c7.46 1.03 14.7-3.29 17.58-10.49C34.8 15.72 32.4 7.51 26.44 3.24z M23.44 20.48c-0.05 3.75-3 6.75-6.66 6.8 c-3.85 0.06-6.91-2.81-7.06-6.64c-0.02-0.58 0-1.16-0.01-1.74c-0.01-0.65 0.19-1.21 0.93-1.21c0.8 0 0.99 0.58 0.97 1.29 c-0.02 0.58-0.02 1.16 0 1.74c0.13 2.58 2.24 4.63 4.81 4.69c2.64 0.07 4.82-1.76 5.06-4.38c0.13-1.4 0.05-2.82 0.06-4.23 c0-0.64-0.27-1.04-1.06-1.06c-3.19 0-6.27-0.03-9.36 0.02c-1.04 0.01-1.39-0.39-1.43-1.4c-0.1-2.51 0.26-4.82 2.22-6.66 c3.44-3.22 9.19-2 10.98 2.35c0.26 0.64 0.51 1.31-0.31 1.67c-0.84 0.37-1.12-0.28-1.41-0.92c-1.05-2.28-3.3-3.46-5.58-2.96 c-2.38 0.52-3.94 2.41-4.02 4.75c-0.03 0.98 0.33 1.39 1.32 1.38c3.01-0.03 6.03-0.02 9.04-0.01c1.34 0 1.48 0.16 1.49 1.51 C23.45 17.15 23.47 18.82 23.44 20.48z"/>
</svg>
Also, the ui-lovlace.yaml code:
- type: custom:button-card
entity: alarm_control_panel.[REDACTED]_alarm_control_panel
name: SimpliSafe
tap_action:
!include popup/home_alarm.yaml
hold_action:
action: none
template:
- base
- icon_simplisafe
Please would you be able to help me with this?
I’m sure it’s the SVGs, because if I swap the SVG out for any one of yours, it works fine. The button card and icon renders on all browsers, not just safari.
A screenshot of the missing button card next to the working climate card below:
Many thanks.