Material / f7 icons state dependend color within default widgets

Dear all,
I would like to use non openhab icons such as material and f7 but integrate state dependend colors for openhab default widgets (e.g. oh-label-item). Can I somehow realize this using the color option within the widget and if yes, how would this look like?
Thanks for help or proper hint to doc - I could not find the right thing even though searching for it.

Thanks and best

Instead of a fixed color (e.g. “red”) you can add an expression.

Look at the widget marketplace, I’m sure their are enough examples on how to use expressions within a widget code

I tried copying such codes from custom widgets already but have not got it working, so I was not sure if this works at all. Is there anything special needed, like “CODE” instead of CODE via Main UI (OH 3.3)?

Does anyone has a working example to start with - then there are tons of examples our there of course.

Code I tried

config:
  label: Anwesenheit
  sidebar: false
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-toggle-item
                            config:
                              title: Abwesenheit initiieren
                              item: Abwesenheit_Timer
                              icon: material:card_travel
                              iconUseState: false
                              color: '=items.Abwesenheit_Timer.state=="true" ? "red" : "blue"'
                          - component: oh-toggle-item
                            config:
                              title: Anwesenheit prĂĽfen
                              item: Anwesenheit_Manual_Sync
                              icon: material:update
                              iconUseState: false
                              iconColor: black

This kind of expression (test) ? "if true" : "if false" is called a ternary expression and your format appears correct. This won’t change the icon color, however, because as the moment the property you’re using is color which in the toggle widgets changes the color that the toggle’s background becomes when switched on. You correctly use the iconColor property in the second widget.

If that still doesn’t work, then you need to examine your assumption about the the state of the Abwesenheit_Timer item. Does it ever actually equal the string "true". For testing just add another item widget to the list, this time a label item to show you what state the item actually has as far as the widget editor is concerned:

    - component: oh-label-item
      config:
        title: State test
        item: Abwesenheit_Timer
2 Likes

Thanks for the reply, took a while to play around and

iconColor

did the trick. I somehow misunderstood the main ui and was lost in the color tag instead.

Thanks!