Icon custom mapping color not working

[Quasarman]

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!