Create icon from png



I have the problem that the img/icon doesn’t shown, when I make it so.

      <ion-img src="../../assets/xxx.png"></ion-img>
      <ion-input type="text" placeholder="First Name"></ion-input>

But this works

       <ion-icon name="leaf" item-left primary></ion-icon>
      <ion-input type="text" placeholder="First Name"></ion-input>

How can I create a custom icon from a png?


If you’re asking about converting .png files to .ico files, I have used Gimp Image Editor to do that in the past.


How can I bind it than to ionic… so that I can use it so

       <ion-icon name="mycustomicon" item-left primary></ion-icon>


If I’m not mistaken, the ion-icons are actually set up as fonts. Here is an old post related to ionic v1, but I believe the process would be similar or ionic 2 or 3.


ok thanks.
But have you any idea why the image isn’t shown when I use

      <ion-img src="../../assets/xxx.png"></ion-img>

with icon tag it works?


So the way I understand your situation, you are able to get ion-icon to show an icon from their library, but you have a separate image xxx.png that you want to use. If that is correct, you will most likely want to use the standard <img> tag.

Check out this page from the ionic docs:

I would also use Chrome’s dev tools to make sure the image is being loaded properly and the css is correct (dimensions, display property, etc).


Try not to use relative paths for images maybe this will work

 <ion-img src="assets/xxx.png"></ion-img>


The only context in which <ion-img> should be used is in conjunction with virtual scroll. If you are using it anywhere else, stop and use an ordinary <img> instead.