q-select with different icons from options

[donsherman]

Hello
in want to have in q-select choice the icon which is listed in the selection itself. As depicted here:

At the moment I have this:

<template v-slot:append>
     <q-icon
          name="outlined_flag"
          class="text-white"
       />
 </template>
 <template v-slot:option="scope">
      <q-item
              v-bind="scope.itemProps"
              v-on="scope.itemEvents"
       >
          <q-item-section>
                <q-item-label v-html="scope.opt.label" />
          </q-item-section>
          <q-item-section side>
                <img :src="scope.opt.icon" />
            </q-item-section>
      </q-item>
</template>

How may I change the static outline_flag with the proper icon the user had choosed?
Appreciating any hints.
BR

[beets]

@donsherman You can use the selected-item slot: https://quasar.dev/vue-components/select#Example--Selected-item-slot

[donsherman]

Thx, do you mean something like this:

          <template v-slot:selected-item="scope">
            {{scope.opt.label}}
            <!-- <q-icon :name="scope.opt.icon" />  -->
            <img :src="scope.opt.icon" /> 
            <!-- <q-avatar :icon="scope.opt.icon" /> -->

          </template>

instead of v-slot:append ?
(only the img tag works. The other ones in rem. doesn’t hit)

The issue now is, that flag is tacked right beside the language text.
How get it right-aligned? (as the outline_flag above)

Furtheron appreciating any hints.

Edit: something like this, did the remedy:

<img
   :src="scope.opt.icon"
    class="q-pl-lg"
/>

Unfortunately will take quite a long time, until all these quasar shortcuts will flow…

[dobbel]

@donsherman

Here’s a start:
https://codepen.io/ontwikkelfabriek/pen/ZEWPLXw

I have a a hint for you:
Read the entire quasar doc at least once globally. So you have an idea what’s possible and where to find it. Take a good look at all the component and examples , for example the awnser is right there:( i just switched the icons from left to right)

https://quasar.dev/vue-components/select#Example--Options-slot