Create icon from png

Ionic Framework ionic-v3
1

Hello,

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

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

But this works


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

How can I create a custom icon from a png?

2

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

3

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

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

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.

https://forum.ionicframework.com/t/add-custom-icons/559

5

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?

6

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:

https://ionicframework.com/docs/api/components/img/Img/

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).

1 Like
7

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

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

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.