Ionic-framework: Ionic icons are not showing up in the screen

[forethoughtde]

Ionic version: (check one with "x")
[ ] 1.x
[X ] 2.x

I'm submitting a ... (check one with "x")
[X ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I am facing difficulties in showing ion-icon in the screen. The following is the HTML code which I use;

<ion-item>
<button ion-button icon-only clear small color="twitter">
      <ion-icon name="logo-twitter"></ion-icon>
    </button>
            <ion-label color="primary">Title</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>

For some reasons, ion-icon does not show up in the screen.
Expected behavior:
Use the above snippet in your app to observe the behaviour.

[jgw96]

Hello, thanks for using ionic! Unfortunately I cannot seem to reproduce this issue. I made this plunker http://plnkr.co/edit/z0DzVL?p=preview that demonstrates it working. Could you make a plunker that I can use to reproduce this issue? Thanks!

[nextbigtech]

I have the same problem..i tried this.. https://github.com/driftyco/ionic-preview-app/tree/master/src/pages/cards/image

dont know if I missed something. I am on ionic 2.

[jgw96]

Hey @forethoughtde and @nextbigtech , unfortunately i cannot reproduce this issue with either the preview app, the conf app or in that plunker i posted above. Could you guys post a repo i can use to reproduce this issue? Thanks!

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[ag14774]

Still having this issue with ionic v. 3.7.0
This code:

    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>{{story.numofvotes}} Likes</div>
      </button>
    </ion-col>

generates this (right click->inspect):

Adding class="ion-md-thumbs-up" to the ion-icon tag fixes the issue but I don't think that is the correct way to do it

[bharat-tiwari]

I am getting the same issue

[zgluis]

I found my problem, I was overriding ionicons with this:

* {
  font-family: "my-cool-font" !important;
}

[suvsah]

I guess the same issue is in Ionic Creator app viewer too!!!

You can see the tab icon missing - this is a demo created using ionic creator with 3.2 framework.

https://creator.ionic.io/share/7ad16cdd7616

[tickylum]

@suvsah I have the same problem too! The icons are showing fine when I do "ionic serve", but when I build an apk, the icons (everywhere... like tabs and buttons with images) are showing with a small X in a box... Can't get it to work!! :(
If anyone knows which references are missing, please guide us here?

[MujtabaJ]

Dears
I have found a solution for this problem when we are adding user defined css class in ionic tag where we are going to show icons at that time the inner class will differ and icons are not show as usual.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.