Skip to content

iOS cog icon #6668

@racecarparts

Description

@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:
browser-ios

iOS emulate ios
emulator-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-outline-ttf-glyph

cog - f412
cog-ttf-glyph

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions