Suroko
Suroko

Reputation: 105

How to use png`s as icons in ionic tabs instead of svg / existent ionic svg`s?

I have Googled a lot and so far have found no solution.

I have a tabs page:

<ion-tabs>
  <ion-tab [root]="HomeTab" tabTitle="Home" ></ion-tab>
  <ion-tab [root]="RecentTab" tabTitle="Recents"></ion-tab>
  <ion-tab [root]="FavTab" tabTitle="Favorites"></ion-tab>
  <ion-tab [root]="PersonalTab" tabTitle="Personal"></ion-tab>
  <ion-tab [root]="InfoTab" tabTitle="Information"></ion-tab>
</ion-tabs>

Using one of the implemented svg icons of ionic works fine and adds the icon above the text: Home-Icon

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

However, I still have not figured out how to use a PNG as an icon. Most tutorials around the web seem to circle around custom SVGs, however none about using PNG's / JPEG.

What is my mistake? Is there a better solution?

Thanks in Advance

Upvotes: 4

Views: 5347

Answers (3)

Bartosz546
Bartosz546

Reputation: 105

I did it this way. I think more elegantly:

To HTML template I add an empty img elements with one css class specified

    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="clean">
            <img class="custom-icon-clean-image"/>
            <ion-label>
                Clean
            </ion-label>
        </ion-tab-button>
        <ion-tab-button tab="dirty">
            <img class="custom-icon-dirty-image"/>
            <ion-label>
                Dirty
            </ion-label>
        </ion-tab-button>
    </ion-tab-bar>

And to scss file I add img behavior for route activation this way:

.custom-icon-clean-image {
  content:url("../../assets/icon/barrel_outline.png");
}

ion-tab-button.tab-selected .custom-icon-clean-image {
  content:url("../../assets/icon/barrel_outline_active.png");
}
 

Solution works with ionic 5 also.

Upvotes: 2

Suroko
Suroko

Reputation: 105

Found a solution that worked for me:

in the SASS / scss file i select the button i want to edit and then override it with the pathe where my png comes from:

.ion-md-home {
content: url("../assets/img/PATH.png") !important; } 

Then add formating how you need it.

Upvotes: 3

Aniruddha Das
Aniruddha Das

Reputation: 21688

You can use custom classes to do this.

On the ion-tab directive set the css class to use via icon-on/icon-off.

<ion-tab title="Home" icon-on="home" icon-off="home">

Add the css class with background image.

.tabs .tab-item .icon.home {
  background-repeat: no-repeat;
  background-position: 50%;
  height: 100%;
  background-image: url('your imagelink here');
  background-size:contain;
}

Upvotes: 1

Related Questions