downloaded the HACS icon from the source at https://assets.hacs.xyz/logo.svg, and tried to add it to my dev tools button grid.
however, it is not completely displayed (failing the top layer and the bottom HACS), and more problematic, has reversed colors
this is the original svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 500 500">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#41BDF5;}
.st1{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M0,0h500v500H0V0z"/>
<path class="st1" d="M367.1,110.6H132.9c-2.4,0-4.4-2-4.4-4.4V78.9c0-2.4,2-4.4,4.4-4.4h234.2c2.4,0,4.4,2,4.4,4.4v27.3
C371.5,108.6,369.5,110.6,367.1,110.6z"/>
<g>
<path class="st1" d="M128.5,329.7c0,2.9,2.3,5.2,5.2,5.2h87.8h57H293c2.9,0,5.2-2.3,5.2-5.2v-74.4c0-2.9,2.3-5.2,5.2-5.2h45.4
c2.9,0,5.2,2.3,5.2,5.2v74.4c0,2.9,2.3,5.2,5.2,5.2h7c2.9,0,5.2-2.3,5.2-5.2v-88.4c0-2.9-2.3-5.2-5.2-5.2H133.7
c-2.9,0-5.2,2.3-5.2,5.2V329.7z M154.5,253.6h88.6c2.4,0,4.4,2,4.4,4.4v55.1c0,2.4-2,4.4-4.4,4.4h-88.6c-2.4,0-4.4-2-4.4-4.4V258
C150.1,255.5,152.1,253.6,154.5,253.6z"/>
<path class="st1" d="M372.2,124.9c-0.4-2.2-2.3-3.8-4.6-3.8h-89.1h-57h-89.1c-2.3,0-4.2,1.6-4.6,3.8l-13.2,71.3
c-0.1,0.3-0.1,0.6-0.1,0.9V221c0,2.6,2.1,4.7,4.7,4.7h9.3h243h9.3c2.6,0,4.7-2.1,4.7-4.7V197c0-0.3,0-0.6-0.1-0.9L372.2,124.9z"/>
</g>
<g>
<path class="st1" d="M183.9,357.9v67.4h-15.1v-25.8h-25.2v25.8h-15.1v-67.4h15.1v26.6h25.2v-26.6H183.9z"/>
<path class="st1" d="M192.5,425.4l26.6-67.7h9.8l24.6,67.7h-16.1l-4-11.4H213l-4.3,11.4H192.5z M218.9,399h9.1l-4.3-12L218.9,399z
"/>
<path class="st1" d="M254.3,391.8c0-18.7,15.1-33.8,33.8-33.8c9.4,0,18.5,4,25,11.1l-10.9,9.8c-3.7-4-8.8-6.3-14.1-6.3
c-10.6,0-19.1,8.5-19.1,19.1c0,10.5,8.5,19.1,19.1,19.1c5.3,0,10.4-2.2,14.1-6.3l10.9,9.9c-6.5,7.1-15.5,11.1-25,11.1
C269.4,425.5,254.3,410.3,254.3,391.8z"/>
<path class="st1" d="M371.4,407.3c-0.5,5.8-4.4,11.1-10.3,14.4c-4.4,2.4-9.5,3.6-14.9,3.6c-1.2,0-2.3-0.1-3.4-0.2
c-9.5-0.9-17.8-5.4-22-11.9l12.3-8.1c1.4,2.3,5.4,4.9,11.1,5.4c3.7,0.4,7.4-0.3,10-1.7c1.6-0.8,2.7-2,2.8-3
c0.1-1.3-0.4-5.8-11.5-6.9c-15.9-1.5-25.8-10.8-24.6-22.9c0.5-6,4.4-11.2,10.4-14.6c5.2-2.7,11.8-4,18.3-3.3
c9.4,0.9,17.7,5.4,22,11.9l-12.3,8c-1.4-2.2-5.4-4.7-11.1-5.2c-3.7-0.4-7.4,0.3-10,1.6c-1.5,0.9-2.6,2.1-2.7,3
c-0.4,4.6,7.3,6.6,11.4,6.9v0.1C362.9,385.9,372.6,394.9,371.4,407.3z"/>
</g>
</g>
</svg>
And in an effort to get it working, Ive stripped everything I could think of from the icon code, and have it like this now:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 500 500" fill="#44739e">
<g>
<path d="M367.1,110.6H132.9c-2.4,0-4.4-2-4.4-4.4V78.9c0-2.4,2-4.4,4.4-4.4h234.2c2.4,0,4.4,2,4.4,4.4v27.3
C371.5,108.6,369.5,110.6,367.1,110.6z"/>
<g>
<path d="M128.5,329.7c0,2.9,2.3,5.2,5.2,5.2h87.8h57H293c2.9,0,5.2-2.3,5.2-5.2v-74.4c0-2.9,2.3-5.2,5.2-5.2h45.4
c2.9,0,5.2,2.3,5.2,5.2v74.4c0,2.9,2.3,5.2,5.2,5.2h7c2.9,0,5.2-2.3,5.2-5.2v-88.4c0-2.9-2.3-5.2-5.2-5.2H133.7
c-2.9,0-5.2,2.3-5.2,5.2V329.7z M154.5,253.6h88.6c2.4,0,4.4,2,4.4,4.4v55.1c0,2.4-2,4.4-4.4,4.4h-88.6c-2.4,0-4.4-2-4.4-4.4V258
C150.1,255.5,152.1,253.6,154.5,253.6z"/>
<path d="M372.2,124.9c-0.4-2.2-2.3-3.8-4.6-3.8h-89.1h-57h-89.1c-2.3,0-4.2,1.6-4.6,3.8l-13.2,71.3
c-0.1,0.3-0.1,0.6-0.1,0.9V221c0,2.6,2.1,4.7,4.7,4.7h9.3h243h9.3c2.6,0,4.7-2.1,4.7-4.7V197c0-0.3,0-0.6-0.1-0.9L372.2,124.9z"/>
</g>
<g>
<path d="M183.9,357.9v67.4h-15.1v-25.8h-25.2v25.8h-15.1v-67.4h15.1v26.6h25.2v-26.6H183.9z"/>
<path d="M192.5,425.4l26.6-67.7h9.8l24.6,67.7h-16.1l-4-11.4H213l-4.3,11.4H192.5z M218.9,399h9.1l-4.3-12L218.9,399z
"/>
<path d="M254.3,391.8c0-18.7,15.1-33.8,33.8-33.8c9.4,0,18.5,4,25,11.1l-10.9,9.8c-3.7-4-8.8-6.3-14.1-6.3
c-10.6,0-19.1,8.5-19.1,19.1c0,10.5,8.5,19.1,19.1,19.1c5.3,0,10.4-2.2,14.1-6.3l10.9,9.9c-6.5,7.1-15.5,11.1-25,11.1
C269.4,425.5,254.3,410.3,254.3,391.8z"/>
<path d="M371.4,407.3c-0.5,5.8-4.4,11.1-10.3,14.4c-4.4,2.4-9.5,3.6-14.9,3.6c-1.2,0-2.3-0.1-3.4-0.2
c-9.5-0.9-17.8-5.4-22-11.9l12.3-8.1c1.4,2.3,5.4,4.9,11.1,5.4c3.7,0.4,7.4-0.3,10-1.7c1.6-0.8,2.7-2,2.8-3
c0.1-1.3-0.4-5.8-11.5-6.9c-15.9-1.5-25.8-10.8-24.6-22.9c0.5-6,4.4-11.2,10.4-14.6c5.2-2.7,11.8-4,18.3-3.3
c9.4,0.9,17.7,5.4,22,11.9l-12.3,8c-1.4-2.2-5.4-4.7-11.1-5.2c-3.7-0.4-7.4,0.3-10,1.6c-1.5,0.9-2.6,2.1-2.7,3
c-0.4,4.6,7.3,6.6,11.4,6.9v0.1C362.9,385.9,372.6,394.9,371.4,407.3z"/>
</g>
</g>
</svg>
no matter what I try, the icon-color and background-color of these custom:button-card 's get interchanged only on this icon…
styling on the button-card:
styles:
card:
- padding: 0px
- background: var(--background-color-off)
icon:
- color: var(--icon-color-off)
and when I add colors to the button directly, see what happens:
original looks like:
while the edited looks like:
