OH3.4 Mainui Custom icons in widget

Add-ons UIs
1

I’m trying to make a custom temperature sensor widget. It is based on the miflora flowercare plant sensor. I want to replace the F7 icons with my custom icons. Unfortunately the icons won’t show. Am I missing something? The icons provided by Openhab also don’t work in this widget.

afbeelding

Name of the (dynamic) icon: temperaturex.svg
Widget code:

uid: temperaturehumiditysensor
tags: []
props:
  parameters:
    - description: The name of the sensor
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Temperature and humidity sensor equipment group (prefix of the point item names)
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 21, 2023, 5:04:48 PM
component: f7-card
config: {}
slots:
  default:
    - component: f7
      config:
        style:
          align-items: start
          background: white
          background-position: right bottom
          background-size: cover
          display: flex
          flex-direction: column
          min-height: 80px
      slots:
        default:
          - component: oh-link
            config:
              action: analyzer
              actionAnalyzerItems: =[props.item + '_temperature']
              color: black
              icon: oh:temperaturex
              iconUseState: true
              style:
                text-shadow: 0px 0px 3px white
              text: =items[props.item + '_temperature'].displayState
          - component: oh-link
            config:
              action: analyzer
              actionAnalyzerItems: =[props.item + '_humidity']
              color: black
              iconF7: drop
              style:
                margin-left: 2px
                text-shadow: 0px 0px 3px white
              text: =items[props.item + '_humidity'].displayState

When i’m using the standard label widget my icon does show:

component: oh-label-cell
config:
  action: group
  actionGroupPopupItem: th_sensor_5_temperature
  expandable: false
  item: th_sensor_5_temperature
  stateAsHeader: true
  title: Temperature & humidity sensor
  icon: oh:temperaturex
2

The icon property in the oh-link is not what you think it is. That goes back to the f7-link instead:

Use an oh-icon component instead, you’ll all the same functionality that you need and access to the oh , f7, or iconify icons.

1 Like