Ionic some icons are not shown (facebook, twitter)

I noticed that some ion icons on this page http://ionicframework.com/docs/v2/ionicons/ who have only iOS value are not shown.

Just try the demo in the document for icons like (facebook,twitter, android, apple) they won’t show up.

on the other hand,icons with iOS, iOS outline, and MD values are shown normally.


 <button ><ion-icon name="facebook" ></ion-icon>test</button>
  <ion-list>
    <ion-list-header>Find us on Twitter and Facebook</ion-list-header>
    <ion-item  >
      <ion-icon name="twitter"  item-left></ion-icon>
      @twitter
    </ion-item>
    <ion-item >
      <ion-icon name="facebook" item-left></ion-icon>
      facebook
    </ion-item>
    <ion-item >
      <ion-icon name="alarm" item-left></ion-icon>
      alarm
    </ion-item>
    <ion-item >
      <ion-icon name="lock" item-right></ion-icon>
      lock
    </ion-item>
    <ion-item >
      <ion-icon name="leaf" item-right></ion-icon>
      leaf
    </ion-item> 
  </ion-list>
   <ion-icon name="time"  item-left></ion-icon>

What am I doing wrong here?

here is a plunker

Do you have an ad blocker ?
Because I know that some social icons (Font awesome icons for example) can be blocked by those blockers.

1 Like

That is an interesting point. I do have an AdBlocker. But It is disabled for localhost, and if some images are blocked there would be an error about resource denied by the client.

Moreover, it is not working on a real android device.

1 Like

There are a number of icons that seems to be only available for the iOS platform for some reason. In order to use their facebook icon I had to manually set it like this for both platforms:

<ion-icon ios="logo-facebook" md="logo-facebook"></ion-icon>

3 Likes

I believe you need to put 'logo-' followed by the name of social-icon
Example for Facebook Icon:
<button ion-button><ion-icon name="logo-facebook"></ion-icon>Facebook</button>

Example for Google Icon:
<button ion-button><ion-icon name="logo-google"></ion-icon>Google</button>

9 Likes

Thanks for this, I don’t see it documented anywhere, but this worked.

1 Like

Click the icon, you will get a popup with the correct name - the name in the list is just an indication.

(Yeah, confusing and I filed an issue about that some time ago: https://github.com/ionic-team/ionic-site/issues/1218 +1 to show your support!)

3 Likes

I love you! My service worker in create react app didn’t work cause my AdBlocker denied the access and so my PWA didn’t start :slightly_smiling_face:
A lot of pain in the darkness but sudnley your comment bright me :slight_smile:
Thanks