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

Issue

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

Solution

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.

Answered By - Suroko