Changing Active Icon Color

[cdn4lf]

Looking for guidance on how to change the active-icon-color when using a button. I can control this on a slider card, but on a button card I can't figure it out.

           styles: >
            /* Card Icon Background Color */

            .switch-button {

            background-color: ${state === 'on' ? 'magenta' : 'mistyrose'}
            !important;

            } /* end backgroud color */

            .icon-container {  background:  ${state === 'on' ? 'darkgrey' :
            'pink'} !important;  }

[betelz]

Using the Custom styles / Templates menu of the card, I managed to make the icon rotate when it's on.

.is-on .bubble-icon{
animation: rotate 1.5s infinite linear;
}
@Keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

I don't know anything about CSS. But i found information in the style.ts file.
https://github.com/Clooos/Bubble-Card?tab=readme-ov-file#styling

[MrBearPresident]

use:

.icon-container {  
  color:  ${state === 'on' ? 'darkgrey' :
  'pink'} !important;  
}