Weird font corruption, ionicons rendering wrong glyph


#1

I’m at a loss. I’ve been updating an existing app, and suddenly my icons are rendering the wrong thing. For example, I have an icon:

<ion-icon name="arrow-dropright-circle"></ion-icon> At a Glance

but this image it’s rendering as if the icon selected was “ion-md-bonfire”.
01%20AM
Similarly, “arrow-dropdown-circle” is rendering as if it was “beer”.

I’ve tried deleting and reinstalling the browser and iOS platforms, etc, but it seems that somehow an incompatible font file has been cached somewhere. Or something. I’m perplexed. Any advice?

Update: Sorry, forgot version information:
Ionic:

ionic (Ionic CLI) : 4.3.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.1, browser 5.0.4
Cordova Plugins : no whitelisted plugins (11 plugins total)

System:

Android SDK Tools : 26.1.1 (/Users/samuelg/Library/Android/sdk)
ios-deploy : 1.9.2
NodeJS : v6.10.3 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61


#2

So there’s some issue in ionicons, although I’m not sure where in the chain of dependencies the issue originated.

I temporarily fixed things for my project by editing the node_modules/ionicons/dist/scss/ionicons-icons.scss file.

In the former, I had to remap the glyphs, e.g.,

.ion-ios-arrow-dropdown-circle:before { content: "\f10f"; }

It turns out some of the CSS classes no longer have -outline versions, so the “home” icon I had in my navigational tabs would vanish when not active. I edited node_modules/ionicons/dist/scss/ionicons-common.scss and added back in the “.ion-ios-home-ouline:before” declaration, and assigned it a glyph in node_modules/ionicons/dist/scss/ionicons-icons.scss

This is obviously not the right fix for supporting the code going forward, but it got me back to where I’d started.