Custom Tab Icons Color Issue

Ionic Framework Ionic Vue
1

We’re trying to utilize custom SVG icons in our tabs but I’m having issues figuring out the color situation.

We want the icons to be black when that tab is not active and blue when that tab is active. The behavior I’m seeing follows this:

  • With the base code below, the Icons are the default gray color and highlighted correctly when active. HOWEVER, if you navigate to a page that does not have the tabs and then return to the page with the tabs, they’re now either white or transparent and don’t show at all (regardless of if they’re active)

  • If I add color=“dark” to the icons, they get the black color however they now don’t toggle based on if it’s the active tab or not

  • If I add color=“somethingelse” to the icons (somethingelse being a color we don’t actually have) they work properly after navigating away from the tabs and returning to the tabs, however we still can’t get the black color when not active.

Any suggestions on what I’ve done wrong?

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="content" href="/tabs/feed">
          <ion-icon :icon="'assets/icon/md-shi.svg'"/>
          <ion-label>Library</ion-label>
        </ion-tab-button>
          
        <ion-tab-button tab="alerts" href="/tabs/alerts">
          <ion-icon :icon="'assets/icon/md-alerts.svg'"/>
          <ion-label>Alerts</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="help" href="/tabs/help">
          <ion-icon :icon="'assets/icon/md-help.svg'"/>
          <ion-label>Help</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="profile" href="/tabs/profile">
          <ion-icon :icon="'assets/icon/md-profile.svg'"/>
          <ion-label>Profile</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
import { ellipse, square, triangle } from 'ionicons/icons';
import { addIcons } from 'ionicons';

export default {
  name: 'Tabs',
  components: { IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonRouterOutlet },
  setup() {

    addIcons({
        'shi': 'assets/icon/md-shi.svg',
        'help': 'assets/icon/md-help.svg',
        'alerts': 'assets/icon/md-alerts.svg',
        'profile': 'assets/icon/md-profile.svg'
    });

    return {
      ellipse, 
      square, 
      triangle,
    }
  }
}
</script>

<style scoped>

ion-label {
    color: #000;
    font-weight: 600;
}


</style>
2

Do you have a sample project I could run this code in?

3

Put one together and it’s not behaving the same as our actual project unfortunately so I’m looking through that now.

Ah -
The second view in our main project had an unscoped style setting ion-icon color to #fff. Disabled that and now they still show when I flip back. I was also able to add a scoped style to the tab buttons to set the color when not activated however it’s set in the tabs file with a hardcoded hex code instead of a variable. I’ll have to figure out how to get that moved to our theme but I guess I’m good to go. Apologies for the wasted post!

1 Like