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

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>

Answer 2

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 3

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 4

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 5

You can do it with SCSS as follow.

SCSS file

// custom icons
ion-icon {
    &[class*="custom-"] {
        margin: 0 5px 0 0;
        vertical-align: middle;
        $sz: 20px;
        width: $sz;
        height: $sz;
    }
    //in case of active
    &[class*="home"][ng-reflect-is-active="true"] {
        background: url("../assets/imgs/home_active.png") no-repeat 50% 50%;
        background-size: contain;
    }
    //in case of inactive
    &[class*="home"][ng-reflect-is-active="false"] {
        background: url("../assets/imgs/home_inactive.png") no-repeat 50% 50%;
        background-size: contain;
    }
}

HTML

<ion-tab [root]="home" tabTitle="Home" tabIcon="custom-chat"></ion-tab>