ionic ion-tab icon with custom image

Question

Here's my original question on ionic forum. There has been no responses to it for some time so I thought I could hopefully get some help from here :(

So, my question is really the title. I would like to use my custom image as the icon for ion-tab in my ionic application. I've checked that it works via ionic serve by doing it as the following:

tabs.html

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

style.css

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

however, when I run the app on my android device, it says Failed to load resource: net::ERR_FILE_NOT_FOUND for my tab-live and the tab-live icon won't load. From what I understand, this error occurs when the app tries to load a certain asset file before it gets loaded in to the memory. But only the tab-live image fails to load while all other images loads fine.

If it could be of an issue, the tab/live page is what loads when the app starts, and the size of my live.png file is about 5.54kb. I have another image that I use in this tab/live page that is larger this image, but it loads fine and I use an img tag with ng-src={{ btnImage }} to change it around.

So, what could be causing this problem and how could I resolve it?

Thanks in advance.

Answer 1

I had been working on implementing the same functionality and faced similar issues. Here's my actual reply on Ionic Forum 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.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;
    }

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

Thanks :D

Answer 2

Please check the file name & extension of image file. when you test app with "ionic serve" it's case insensitive but on Android device case sensitive is important.

For example: change "myicon.PNG" to "myicon.png"

Answer 3

This error means that file was not found. Either path is wrong or file is not present where you want it to be. Are you sure your image in www/img folder because it's working for me in android.

Answer 4

Custom icons for ionic, You can create your class name

code as bellow...

.export-inactive{
    content: url('../img/icons/task-icons/export-inactive.svg'); !important;
}

For example

<div class="tabs tabs-icon-top">
<a class="tab-item">
            <i class="icon export-inactive"></i>
            Export
        </a>
</div>