CODEWITHSUNDEEP
androidangularjsionic-framework
ohnu93
ohnu93

Reputation: 273

ionic ion-tab icon with custom image

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.

Upvotes: 2

Views: 8514

Answers (5)

Shailesh Bhardwaj
Shailesh Bhardwaj

Reputation: 179

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>

Upvotes: 0

Kapil Sharma
Kapil Sharma

Reputation: 161

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

Upvotes: 0

user3047993
user3047993

Reputation: 1

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"

Upvotes: 0

Dinesh Vaitage
Dinesh Vaitage

Reputation: 3183

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>

Upvotes: 2

NiRmaL
NiRmaL

Reputation: 3216

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.

Upvotes: 0

Related Questions