Hello,

I am trying to map some icons in quasar following the guid in the doc’s. So far it seems to work fine I get my desired icon from the svg mapped to the respective quasar component that has the “icon” property. The only problem I face is that the color is not set accordingly.`

This is a code snipped from some layout file. the menu varaible holds all the respective route tabs which then will get generated accordingly. The menu object holds all the information one of them bbeeing the icon field. The color is set accordingly for all the icons I am not mapping in the App.vue file only the one Icon “ion:home” is always black no matter if it is selected or I set a color class.

<q-tabs
                v-model="tab"
                vertical
                no-caps
                active-color="secondary"
                active-bg-color="overlay-4"
                indicator-color="secondary"
                class="text-navigation"
            >
                <q-route-tab v-for="(item, index) in menu" :key="index" :to="item.route" :name="item.name" :icon="item.icon" :label="item.label" />
            </q-tabs>

<script>
const myIcons = {
  'ion:home': 'img:statics/ionicons-v5.0.0/home.svg',
}

export default {
  name: 'App',
  created () {
    this.$q.iconMapFn = (iconName) => {
      const icon = myIcons[iconName]
      if (icon !== void 0) {
        return { icon: icon }
      }
    }
  }
}
</script>

Above script is from my App.vue file where im initializing all the icon mapping stuff. What am I missing or is it even possible to configure the color like it is with the default icon sets?

Note: I know quasar supports ionicons-v4 but what I want is the V5 version.

Thanks in advance!

Same Problem any solutions yet?

Thank you for the tip! It works now i just had to specify the path on where the .svg images for the flags are located like shown below:

Vue.use(VueFlags, {
  // Specify the path of the folder where the flags are stored.
  iconPath: '/images/vueflags/flags/',
});

Furthermore the flags can be downloaded from their repository described at their page (link in the first comment).

Hello I am new to quasar and vue so bear with me if I have overlooked something.
I found this really nice component for displaying country flags and I am struggeling to import this into quasar.

The component I am talking about is called vue flags: https://www.growthbunker.dev/vueflags/
I followed the instructions given on that page by first installing the plugin using npm and then importing it via the main.js file (in my case making a main.js boot file in quasar with the following content):

import Vue from 'vue';
import VueFlags from '@growthbunker/vueflags';

Vue.use(VueFlags);

The documentation further states that I should now be able to use the comonent like:

<gb-flags
    code="fr"
    size="small"
  />

But this dosen’t seem to work within quasar.

I have already contacted the author of vue flags but sadly they have never worked with quasar and therefore cannot help me.

Any advice on what I am doing wrong?