Weather Icon doesn't change according to state

I am using the HA weather forecast card within a grid card. Unfortunately the weather icon does not change according to its current state. Regardless of its state (sunny, rainy, cloudy) it always displays the cloud icon as seen in the screenshot. Is there a way to make the icon change according to its state?

Here’s the yaml code of the entire grid:

type: grid
square: false
columns: 3
cards:
  - type: grid
    cards:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.vicare_outside_temperature_2
            name: Temperatur
        color_thresholds:
          - value: -2
            color: '#00FFFF'
          - value: 2
            color: '#0000FF'
          - value: 10
            color: '#008000'
          - value: 20
            color: '#FFFF00'
          - value: 30
            color: '#FF0000'
          - value: 38
            color: '#DC143C'
        hours_to_show: 48
        line_width: 10
        tap_action:
          action: none
        hold_action:
          action: none
    columns: 1
    square: false
  - type: button
    entity: weather.home
    name: Wetter
    show_state: true
    show_name: false
  - type: button
    tap_action:
      action: navigate
      navigation_path: alarm
    show_name: false
    hold_action:
      action: none
    entity: alarm_control_panel.home_alarm
    show_state: false
1 Like

Does anybody have an idea?

Just letting you know I have solved it with a custom button card using operators to query the states that the weather.home entity delivers.

type: custom:button-card
entity: weather.home
name: Wetter
styles:
  card:
    - height: 145px
show_state: true
show_name: false
state:
  - operator: '=='
    value: clear-night
    icon: mdi:weather-night
  - operator: '=='
    value: cloudy
    icon: mdi:weather-cloudy
  - operator: '=='
    value: fog
    icon: mdi:weather-fog
  - operator: '=='
    value: hail
    icon: mdi:weather-hail
  - operator: '=='
    value: lightning
    icon: mdi:weather-lightning
  - operator: '=='
    value: lightning-rainy
    icon: mdi:lightning-rainy
  - operator: '=='
    value: partlycloudy
    icon: mdi:weather-partlycloudy
  - operator: '=='
    value: pouring
    icon: mdi:weather-pouring
  - operator: '=='
    value: rainy
    icon: mdi:weather-rainy
    color: blue
  - operator: '=='
    value: snowy
    icon: mdi:weather-snowy
  - operator: '=='
    value: snowy-raining
    icon: mdi:weather-snowing-rainy
  - operator: '=='
    value: sunny
    icon: mdi:white-balance-sunny
    color: yellow
  - operator: '=='
    value: windy
    icon: mdi:weather-windy
  - operator: '=='
    value: windy-variant
    icon: mdi:weather-windy-variant
  - operator: '=='
    value: exceptional
    icon: mdi:cloudy-alert
    color: red

And this is how it looks in my dashboard now.