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



  • 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!
    20191104110008.png

    <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>
    
    


  • @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





  • Thanks for handling this @metalsadman ❤


Log in to reply