Why does color icon not change in custom button card?

Configuration
1

When the state of input_boolean.zoutniveaulaag changes, the color of the icon does not change. I can not see what is wrong. Do you ??

          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: 'input_boolean.zoutniveaulaag'
                icon: 'mdi:raspberry-pi'
                aspect_ratio: 1/1
                name: Waterontharder
                styles:
                  card:
                    - background-color: '#000044'
                    - border-radius: 10%
                    - padding: 10%
                    - color: ivory
                    - font-size: 12px
                    - text-shadow: 0px 0px 5px black
                    - text-transform: capitalize
                  grid:
                    - grid-template-areas: '"i temp" "n n" "cm cm" "cm-p cm-p" "wifi wifi"'
                    - grid-template-columns: 1fr 1fr
                    - grid-template-rows: 1fr min-content min-content min-content min-content
                  name:
                    - font-weight: bold
                    - font-size: 13px
                    - color: white
                    - align-self: middle
                    - justify-self: start
                    - padding-bottom: 4px
                  img_cell:
                    - justify-content: start
                    - align-items: start
                    - margin: none
                  icon:
                    - color: >
                        [[[
                          if (entity.state = 'on') return 'lime';
                          if (entity.state = 'off') return 'orange';
                          else return 'red';
                        ]]]
                    - width: 70%
                    - margin-top: -10%
2

I think the color template should be like this:

- color: >
      [[[
        if (entity.state === 'on') return 'lime';
        if (entity.state === 'off') return 'orange';
        else return 'red';
      ]]]
3 
- color: >
     [[[
     if (entity.state == 'on') return 'lime';
     elif (entity.state == 'off') return 'orange';
     else return 'red';
     ]]]

- color: >
     [[[
     if  states('input_boolean.zoutniveaulaag') == 'on' 
     return 'lime';
     elif  states('input_boolean.zoutniveaulaag') == 'off' 
     return 'orange';
     else return 'red';
     ]]]
4

Burningstone’s option worked for me so I did not try the ones. But thank you both.

5

I think I have the same problem, but since I am very new to HA the problem probably sits in front of the screen… I set up the following template for the custom:button-card and try to change the icon color based on the current_position attribute of the awning. The strange thing in my mind is, that the code works fine for the label and the icon but not for the color. Can anyone point me to a solution, why the color property is not accepting the values I pass to it? Any help is HIGHLY appreciated.

  template_cover:
    styles:
      card:
        - padding: 5px 5px
        - height: 60px
        - show_name: true
        - color_type: icon
        - font-size: 12px
      name:
        - color: white
        - justify-self: center
      label:
        - color: white
        - justify-self: center
        - align-self: top
      grid:
        - grid-template-areas: '"n" "i" "l"'
        - grid-template-rows: min-content 1fr min-content 
        - grid-template-columns: 1fr
      img_cell:
        - align-self: center
        - text-align: center
      # state:
      #   - justify-self: center
      #   - padding-left: 0px
    state:
      - value: "open"
        color: >
          [[[
            return (entity.attributes['current_position'] == '100' ? 'red' : 'yellow') 
          ]]]
        icon: |
          [[[
            return (entity.attributes['current_position'] == '100' ? "mdi:window-shutter" : "mdi:window-shutter-alert")
          ]]]
        label: |
          [[[
            return entity.attributes['current_position'] + ' %'
          ]]]  
      - value: "closed"
        color: rgb(0,255,70)
        icon: mdi:window-shutter-open
        label: >
          [[[
            return "Safe"
          ]]]  
    tap_action:
      action: more-info
    show_label: true