Ionicons: Is v4 Compatible with Ionic 3?

[sfaizanh]

Does Ionicons v4 have compatibility with ionic 3?

[AlexanderMisel]

I don't think it's compatible.

[javecruz]

How are we suppose to use ionicons v4 if ionic 4 is not released yet?

[alenl]

They have the font version and can be used, but the problem is they seem to clash with the default iconset which is located in ionic-angular/fonts. If you force-override the font and the SCSS file from ionic-angular with the one from ionicons, then the new icons magically work. But requires doing a manual copy (can be in a build step) from the node_modules/ionicons into your assets folder.
I don't like that "solution". Anybody knows of a better one?

[matheusdavidson]

Its a very frustrating situation, ionicons v4 work on the browser but not in the device

[alenl]

Actually, I was able to make it work. I tested both in browsers (desktop and mobile) and on Android via APK. The problems happen because both ionic-angular v3 and ionicons v4 try to deploy their files into the same destination filenames. Since in ionic-angular v3 the icons are integrated into same npm module with the rest, you obviously cannot remove that. So it works or not at random in each clean rebuild, depending on the order of copies, it seems.

The solution is to:

1. Make a copy config rule to copy the fonts to a different folder, like this:

  "copyIoniconsv4": {
    "src": "./node_modules/ionicons/dist/fonts/ionicons.*",
    "dest": "www/assets/fonts2/"
  }

and also

1. In src/theme/variables.scss put this:

$ionicons-font-path: '../assets/fonts2';
@import "node_modules/ionicons/dist/scss/ionicons";

(but make sure it is after the original theme: @import "ionic.theme.default";).

The result is that the final build will have both the old and the new fonts (guess if you make an apk, it will be a few 100kiB bigger because of that), but only the new fonts are loaded. Seems to work for now.

[matheusdavidson]

@alenl, that work on ionic 3, right? i'm looking for a way to make it work in ionic 4

[alenl]

Well, if I understood correctly, this thread is titled "Is v4 Compatible with Ionic 3?". ;)

[matheusdavidson]

@alenl, yes, my question to you was just to see if your solution could help me as well.

[alenl]

Sorry, I haven't tried Ionic v4 yet. Don't have time to risk it at his moment. To answer your question, yes, my solution is for Ionic v3 + Ionicons v4.

[jcuervo]

is v4 compatible with ionic 3? tried it on my current ionic 3 app and some icons were missing, specifically for ion-tabs with tabIcon attribute. Did not change the icon value, i.e. list-box, but it mapped to cash (on v3).

lost some hours and ended up reverting to version 3.0.0.

[alenl]

@jcuervo, check my long comment from a week ago on how to workaround that.

[jcuervo]

@alenl geez! my bad! will try it out and ping back how it goes. thanks, bro!

[jcuervo]

@alenl it works! but I still encounter the same issue on ion-tab, will see in a few days if i got time to determine where this breaks.

search icon appeared when the tab was selected

[alenl]

@jcuervo Hm, I think I saw this, but didn't realize it is due to ionicons v4. I only saw that on iOS. In desktop browser and on Android this didn't happen. Where do you see it?

[jcuervo]

@alenl this is on browser (safari, responsive design mode), i usually test it on it before going to the real device (iOS and Android).

[alenl]

@jcuervo what I meant is - if the browser is set to responsive mode and emulates an iOS device, then that happens.
Thing is when Ionic detects an iOS device, it starts using ios- versions of icons, (whereas it normally uses md- versions on Windows and Android). This looks as if Tabs use some variation of the icon when it is unselected, and that variation doesn't exist for ios- version. But this is just a stab in the dark.
You can try this in Android emulation mode, and the problem will not be there (from what I saw). I don't know if Safari can emulate an Android in responsive mode, but Chrome can do either Android or iOS. Make sure to refresh the page after changing the emulated device.
That said, I too would like to know what causes this, but I don't have time to look into this right now.

[alenl]

Yes, I have confirmed that the in the iOS mode, Tab component adds suffix "-outline" to icons for tabs that are not selected. If the icons that you are using don't have outline versions, then they won't show. You may be able to work around that using custom css.

[jcuervo]

@alenl thanks for the help, bro. i reverted to v3, will play with v4 when I got more time.

[olivermuc]

Here is what I did to workaround missing -outline definitions, not elegant but it works and easy enough to rip out once moving to Ionic v4... _in a year or so ;-)_

// 
// just a workaround until moving to Ionic v4
// the below enables ionicons-v4 with Ionic v3 tabs
// 
ion-tabs {
    .tab-button {
        .tab-button-icon {
            display: inline-block;
            font-family: "Ionicons";
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            text-rendering: auto;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            &.ion-ios-speedometer-outline:before {
                content: "\f4b0";
            }
            &.ion-ios-calendar-outline:before {
                content: "\f3f4";
            }
            &.ion-ios-funnel-outline:before {
                content: "\f182";
            }
        }
    }
}

[anotomix]

Had same question about using ionicons v4 with ionic v3. Actually you all wrong, and fix this issue was super easy. As you can see in ionic-app-scripts, there is copy job (config/copy.config.js) where ionicons are copying first and after ionic-angular which contains also ionicons fonts which is causing the main problem. Just create in your app root new folder called "config" and put there file "copy.config.js" with same contents as ionic-app-scripts has, only difference will be you need to change ionic-angular to copy first and then only ionicons.

Sample of new (override) config:
module.exports = { copyAssets: { src: ['{{SRC}}/assets/**/*'], dest: '{{WWW}}/assets' }, copyIndexContent: { src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'], dest: '{{WWW}}' }, copyFonts: { src: ['{{ROOT}}/node_modules/ionic-angular/fonts/**/*', '{{ROOT}}/node_modules/ionicons/dist/fonts/**/*'], dest: '{{WWW}}/assets/fonts' }, copyPolyfills: { src: [{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}], dest: '{{BUILD}}' }, copySwToolbox: { src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'], dest: '{{BUILD}}' } }

After that just add config to package.json as following:
"config": { "ionic_copy": "./config/copy.config.js" },

[vankeer]

Thanks @anotomix , I had the same issue and your answer solved it for me