Need some help for a responsive MQTT button

Hello everyone,

Im trying to optimise a button that controls my rollers; more specifically sets them to a certain height. Im using the shelly 2.5 as a relay which works with MQTT.

The button works nicely with the following code:

          - type: 'custom:button-card'
            icon: 'mdi:window-shutter'
            name: 25%
            state_display: On
            show_state: true
            tap_action:
              action: call-service
              service: mqtt.publish
              service_data:
                payload: 45
                topic: shellies/shellyswitch25-1234/roller/0/command/pos
                qos: 2

When I hit the button, the roller moves into the preferred position. So far so good.

However, what I would like to achieve is to have the icon turn into another icon when the desired position has been reached (alternatively just change the color).

I know that the shelly posts its current position to the following topic:

shellies/shellyswitch25-1234/roller/0/pos

What I cannot wrap my head around is how I can make the button subscribe to that topic and change its icon (or color) when it reads for example the value “45”.

My goal is to have three buttons: 25%, 50% and 75% roller height and always having some sort of indication which state is currently “active”.

I have searched around for quite a bit now and couldnt really find anything that goes into the direction im heading. Any help is highly appreciated!

Cheers
Wong