Changing colour of icons

Configuration Frontend
1

Hi,

I’m trying to change the colour of an icon in a bubble card the with below code and it doesn’t seem to change anything. Does anyone know why?

type: custom:bubble-card
card_type: button
name: Fan Living Room
icon: mdi:fan
show_state: false
entity: switch.living_room_4gang_l4
styles: |-
  .bubble-icon {
    color: ${hass.states['switch.living_room_4gang_l4'].state === 'off' ? 'blue' : ''}; /* Set color to blue when the switch is off */
    animation: ${hass.states['switch.living_room_4gang_l4'].state === 'on' ? 'slow-rotate 3s linear infinite' : ''};
  }
  @keyframes slow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  | 
    .bubble-button-card-container {
      background: rgba(245, 40, 145, 0.8) !important;
    }
2

I’m having a similar issue where color change formerly worked but not with 2025.1. My example code is below

type: entities
entities:
  - entity: binary_sensor.smart_switch_all_available
    type: custom:multiple-entity-row
    name: Smart Switch All Available
    secondary_info: false
    show_state: false
    entities:
      - icon: mdi:circle
    icon: mdi:check-circle
    card_mod:
      style:
        hui-generic-entity-row $: ""
        .: |
          div.entity:nth-child(1) state-badge {
            color: {% if is_state('binary_sensor.smart_switch_all_available', 'on') %} green {% elif is_state ('binary_sensor.smart_switch_all_available', 'off') %} red {% else %} yellow {% endif %}
            
          }
3

Your case is probably very different and related to “card-mod partially broken in 2025.1” issue. Go to main card-mod thread for a fix.