F7-list-item icon

Hey all,

Using the following (from the docs),

<f7-popover class="popover-menu">
    <f7-list-item link="#" title="Ivan Petrov" after="CEO">
      <template #media>
        <f7-icon f7="house"></f7-icon>

Renders the icon at the end of the list, not the start. See:

Screenshot 2021-03-11 at 18.24.49

This works as expected.

      <div class="item-content">
        <div class="item-media"><i class="f7-icons">resize_v</i></div>
        <div class="item-inner">
          <div class="item-title">Resize</div>

Issue with the Vue render?

Is it Framework7 v6?

It’s version 5.7.14. Parking the migration until this ships.

As I remember in Vue 2, slots should be specified via slot=“media” attribute, not using template tag

Thanks for the suggestion. Unfortunately no luck with either:

<slot name="media"><f7-icon f7="house"></f7-icon></slot>
or <template v-slot:media>

<f7-icon slot=“media” ...

1 Like

Haha! Literally the only thing other thing I could have tried. Thanks so much (again as always)!