Reputation: 105
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
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
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
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