How to add new png icons

Ionic Framework ionic-v3
1

Hello Group, I have a sidemenu, with ionic icons, but I want to replace with own icons in PNG format, how can I replace them?

// used for an example of ngFor and navigation
this.pages = [
{ title: ‘El Origen’, component: HomePage,icon: “home” },
{ title: ‘Superman’, component: HerosPage, icon: “person” },
{ title: ‘Batman’, component: HerobPage, icon: “power” },
{ title: ‘AQUAMAN’, component: HeroaPage, icon: “alarm” },
{ title: ‘LINTERNA VERDE’, component: HerogPage, icon: “archive” },
{ title: ‘FLASH’, component: HerofPage, icon: “attach” },
{ title: ‘CYBORG’, component: HerocPage, icon: “beer” },
{ title: ‘WONDER WOMAN’, component: HerowPage, icon: “bookmark” }

];

my idea is:

{ title: ‘El Origen’, component: HomePage,icon: “my icon png” },

Someone can guide me?

Thanks!

2

You should be able to do what you said before,
{ title: ‘El Origen’, component: HomePage,icon: “my icon png” }

Then just change your side menu template to use img rather than ion-icon. You’ll likely need to add some custom styling, but that’ll just be some basic css.

3

I have not been able to add my PNG icons, I added a new class but it is not displayed.

1 Like
4

Here is the code .please try this.
app.component

this.pages = [
{ title: 'Demo', component: demo, icon:'assets/img/demo.png' }
];

app.html

      <button menuClose ion-item *ngFor="let p of pages">
      <img width="25px" height="25px" src="{{p.icon}}"/>
      </button>

Hope, this will solve your issue
Thanks,

3 Likes
5

This is working perfectly.

6

But how could it work on a ion-tab ?

7

thank you,

works great :heart:

1 Like
8

if its work fine please mark the solution

9

i’m not sure but I think that’s not the complete solution. If I understood it correctly, OP wants to differ between an ion-icon or a file path.

app.component.ts

this.pages = [
{ title: 'Demo', component: demo, path:'assets/img/demo.png', icon:null },
{ title: 'Demo2', component: demo2, path:null, icon:'home' }
];

app.html

<button menuClose ion-item *ngFor="let p of pages">
      <img width="25px" height="25px" src="{{p.path}}" *nfIf="p.icon==null"/>
      <ion-icon name='{{p.icon}}' *nfIf="p.path==null"></ion-icon>
</button>