q-select with different icons from options

  • 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>
     <template v-slot:option="scope">
                    <q-item-label v-html="scope.opt.label" />
              <q-item-section side>
                    <img :src="scope.opt.icon" />

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

  • Thx, do you mean something like this:

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

    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:


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

  • @donsherman

    Here’s a start:

    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)


Log in to reply