Ion-tab icon with custom img

I’ve got insights from this. So, here’s what I have done:

code for my ion-tabs:

<ion-tabs class="tabs-icon-bottom tabs-color-active">
    <!-- this icon does not load -->
    <ion-tab title="LIVE" icon="tab-live energized" href="tab/live">
      <ion-nav-view name="tab-live"></ion-nav-view>
    </ion-tab>

    <ion-tab title="REPLAY" icon="tab-replay energized" href="tab/replay">
      <ion-nav-view name="tab-replay"></ion-nav-view>
    </ion-tab>

    <ion-tab title="SETTINGS" icon="ion-android-options energized" href="tab/setting">
      <ion-nav-view name="tab-setting"></ion-nav-view>
    </ion-tab>
  </ion-tabs>

my css class declaration:

.tab-live {
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-image: url('../img/radio_energized.png');
}
.tab-replay {
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-image: url('../img/replay.png');
}

I get Failed to load resource: net::ERR_FILE_NOT_FOUND for .tab-live when I test it on my android device. When I test it using serve and localhost, it doesn’t show this error.

From what I understand, this is because the asset file has not been loaded before it was called upon. But then why would my img file for tab-replay be loaded on time when my tab-live img file won’t be?

Oh, and btw, the first page that opens when the app launches is the /tab/live, if that makes any difference? (I’ve tested if this is the problem by changing my root page, but still no luck)

did you find the solution?

Hi devs, I had been working on implementing the same functionality and faced similar issues.
I do not know if the problem still exists but maybe my answer would help devs who might come across this.
So, here’s how to nail it:

In tabs.html:

<ion-tabs  [selectedIndex]="indexselected" >
  <ion-tab [root]="tab1Root" tabTitle="Settings" tabIcon="settings"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="abc" tabIcon="abc"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="xyz" tabIcon="xyz"></ion-tab>
</ion-tabs>

In tabs.scss:

// CSS for Settings icon.
    .ion-ios-settings, .ion-md-settings {
        content: url(../assets/icon/cutom-selected-icon.svg);
        width: 24px;
    }
    .ion-ios-settings-outline {
        content: url(../assets/icon/cutom-unselected-icon.svg);
        width: 24px;
    }
    .ion-md-settings[ng-reflect-is-active=false]{
        content: url(../assets/icon/cutom-unselected-icon.svg);
        width: 24px;
    }

Thanks :wink:

1 Like

Thanks for sharing, this works great, I had to move the style to app.scss