How to use the QIconPicker?How to import the dependencies?

[lovechaozi]

Hello!
I want to use the QIconPicker component , but if I choose the icon-set when it is in the following four situations : material-icons-outlined、material-icons-round、material-icons-sharp、themify , it will be shown like the picture below . Is it caused by dependency that I didn’t import or other problems ? I don’t know how to display the icon , please help me and tell me how to solve it . Thank you!

<template>
  <div>
    <div class="row flex flex-center q-mt-md">
      <q-select v-model="select" :options="options" class="q-ma-md" label="icon set" style="width:200px" clearable />
      <q-input v-model="value" label="icon name" class="q-ma-md" style="width:200px" clearable />
      <q-input v-model="filter" label="filter" clearable class="q-ma-md" style="width:200px" />
    </div>
    <div class="q-ma-xl" style="width:90%;margin-left:8%">
      <q-icon-picker v-model="value" tooltips font-size="25px" color="grey-7" selected-color="white" pagination-color="red" selected-background-color="blue-4" :icon-set="select" :filter="filter" :pagination.sync="pagination" style="height: 300px">
        <!-- <template #icon="name">
          <q-icon :name="name" size="lg" :title="name" />
        </template> -->
      </q-icon-picker>
    </div>
  </div>
</template>

<script>

import Vue from 'vue'
import Plugin from '@quasar/quasar-ui-qiconpicker'
import '@quasar/quasar-ui-qiconpicker/dist/index.css'

Vue.use(Plugin)

export default {
  // components: { QIconPicker },
  data() {
    return {
      options: [
        'eva-icons', 
        'fontawesome-v5', 
        'ionicons-v4', 
        'material-icons', 
        'material-icons-outlined', 
        'material-icons-round',
        'material-icons-sharp',
        'mdi-v4',
        'themify'
      ],
      select: null,
      date: '',
      value: '',
      filter: '',
      pagination: {
        itemsPerPage: 52,
        page: 0
      }
    }
  }
}
</script>

[metalsadman]

@lovechaozi you must add the icon libs in your quasar.conf.js under extras.
ie

extras: [ 
        'eva-icons', 
        'fontawesome-v5', 
        'ionicons-v4', 
        'material-icons', 
        'material-icons-outlined', 
        'material-icons-round',
        'material-icons-sharp',
        'mdi-v4',
        'themify'
]

https://quasar.dev/options/installing-icon-libraries#Installing

[lovechaozi]

@metalsadman said in How to use the QIconPicker?How to import the dependencies?:

quasar.conf.js

Thank u!

[Hawkeye64]

Thanks for handling this @metalsadman