OH3 oh-cell with f7-chip and icon - icon not displayed

Setup, Configuration and Use Beginners
1

Hi All

I am trying to set up an oh-cell with a couple of f7-chip with the icon displayed. Adding the icon: f7:compass statement seems to allocate space for the icon, but it is not displayed:

image

The code to produce this is as follows:

component: oh-cell
config:
  on: true
  title: TEST
slots:
  header:
    - component: f7-list
      config:
        mediaList: true
      slots:
        default:
          - component: f7-list-item
            config:
              title: TEST
            slots:
              title:
                - component: f7-chip
                  config:
                    color: gray
                    text: Lounge
                - component: f7-chip
                  config:
                    icon: f7:compass
                    icon-color: black
                    color: gray
                    text: Lounge

Any ideas on how to get the icon to display?

Thanks
Mark

2

If you want the f7 icons on the chip use:

iconF7: compass

instead.

1 Like
3

Thanks Justin. Speedy solution as always.

4

Hi,

I have an add-on question: is there a way to use custom images as chip icons (as in f7 contact chips)
f7-contact

I tried around, but didn’t find a way to get the Image URL into the yaml so that it works…

Regards
Thomas

5

Put an oh-image component in the media slot of the chip. Then you can just use the url property of the oh-image with a full address string if the image is on the web, or with the /static/image.jpg if the image is in your conf/html folder.

- component: f7-chip
  config:
    text: With image
  slots:
    media:
      - component: oh-image
        config:
          url: https://addresss.of.image.com/image.jpg
6

Works like a charm, thanks a lot!

7

Hi,
do you have a example of a working code using Contact Chips for custom widgets please?
Thanks

8

Hi together,
if someone is interested for including media to widget, check out this example: