Ionic-framework: iOS `cog` icon

[racecarparts]

Short description of the problem:

When using tabs in iOS emulator or native device, the cog icon is incorrect. It looks to be the TTF version of the fonts, as the cog outline icon (f411) works fine in the --lab browser rendering. See images below in the glyph viewer.

What behavior are you expecting?

That the cog outline icon (f411) matches the browser rendering in an iOS emulator and native device.

Steps to reproduce:

1. Add cog-outline to page
   
   
   
   • <ion-icon name="cog-outline"></ion-icon>
   
   
   • <ion-tab [root]="tab3Root" tabTitle="" tabIcon="cog"></ion-tab>
   
   
2. Launch ionic emulate ios
3. cog-outline is incorrectly rendered on pages where it is used.

Browser serve --lab:

iOS emulate ios

<ion-tabs>
  <ion-tab [root]="tab3Root" tabTitle="" tabIcon="cog"></ion-tab>
</ion-tabs>

or

<ion-row>
  <ion-col>
    <button dark large>
      <ion-icon name="cog"></ion-icon>
     </button>
     <label>cog</label>
  </ion-col>
  <ion-col>
    <button dark large>
      <ion-icon name="cog-outline"></ion-icon>
    </button>
    <label>cog-outline</label>
  </ion-col>
</ion-row>

Here are some shots of the TTF glyphs from a glyph-viewer:

cog-outline - f411:

cog - f412

Which Ionic Version? 1.x or 2.x
2.0.0-beta.7

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[Bouzmine]

+1

[Bouzmine]

Any update on this ?

[jgw96]

@Bouzmine @wheelertom Are you all still having this issue with beta.10? Thanks for using Ionic!

[Bouzmine]

@jgw96 Yes

[huysamen]

+1 this is still an issue in beta.11

[Bouzmine]

@jgw96 @bensperry Could you add this to RC1 milestone and take a look at this. This bug has been there for a while and I use this icon in my tab bar so it's quite ugly (keeping me from releasing).

[marcelgoya]

Still happening in RC3. I'd need to get this fixed as well please.

[troyanskiy]

RC5 - still have the same problem

[matiastucci]

I'm still having this issue in 2.0.0 final

[tmvnk]

2.0.1 also having this issue.

[marlosirapuan]

same here

[ghost]

Still not working..

[YannKauderer]

Still an issue today guys :/ can you fix this please ? I wanna release my app ASAP ty !

[andrewarchi]

I have this same issue. Please fix! Thanks.

On both iOS and Windows, the non-active icon (iOS-Outline) has this issue. I am using it in an ion-tab. I encounter this on http://localhost:8100/ionic-lab, http://localhost:8100/?ionicplatform={ios|windows}, and the iOS Ionic View app.

<ion-tab [root]="tab2Root" tabTitle="Settings" tabIcon="cog"></ion-tab>

iOS:

Android:

Windows:

[zeidlos]

Having the same issue. Any way to fix this soon?

[Nicolaidavies]

I'm also having this issue with Ionic version 3.9.2.

[igolka97]

Any news at this issue?

[zakton5]

+1 Please fix

[bensperry]

This is an old version of Ionicons and I will not be updating it. I recommend using the new version!