Icon state color does not work at all (with fix)

[KennethLavrsen]

Hi The state-color: true does not work at all. There are two issues.

One is a bug in the code. You use an opening ha-svg-icon and close it with /ha-icon-button. It is the opening that is wrong.

And the other is that the css still use the now obsolete paper states. Now the state-cover-active-color and state-cover-inactive-color css names should be used for covers.

I am not a CSS or JS expert at all.

But I still managed to fix it. It is 3 lines of code changes. I am not skilled in github so please accept that I contribute a good old diff -u

--- shutter-row-before.js   2023-04-23 12:05:51.073611800 +0200
+++ shutter-row-after.js    2023-04-29 15:32:33.006417400 +0200
@@ -697,7 +697,7 @@
 ha-icon.active-icon,
 ha-icon-button.active-icon {
     color: #fdd835 !important;
-    color: var(--paper-item-icon-active-color, #fdd835) !important;
+    color: var(--state-cover-active-color, #fdd835) !important;
 }
 div.content {
     cursor: pointer;
@@ -714,7 +714,7 @@
     display: inline-block;
     text-align: center;
     color: #44739e;
-    color: var(--paper-item-icon-color, #44739e);
+    color: var(--state-cover-inactive-color, #44739e);
     width: var(--ha-icon-height);
     height: var(--ha-icon-height);
     line-height: var(--ha-icon-height);
@@ -1021,7 +1021,7 @@
         let getIconElementByPath = (path) => {
             return y`
                 <ha-svg-icon-box>
-                    <ha-svg-icon path="${path}" class="${getClassName()}"></ha-icon-button>
+                    <ha-icon-button path="${path}" class="${getClassName()}"></ha-icon-button>
                 </ha-svg-icon-box>
             `;
         };

[berrywhite96]

Sorry for replying so late. I fixed this issue with v0.3.5, also they added in the native entity card another color so this card will also use it.

I am currently working on a new card which also includes cover entities, so this project won't be developed further. Just maintaining it as long as possible with bug fixes for incoming HA changes.

[KennethLavrsen]

Thanks a lot. Looking forward to your new toy.