ionic-frameworkionicons

Ionicons upgrade from v4 to v5 resulting in not displaying any icons


I did initially add this code to my index.html:

<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

To use the latest version of the ionicons but now when I remove that line from index.html, none of my ionicons are no longer appearing. I am running ionic cordova run android to test it on a physical device.

ionic info

Ionic:

   Ionic CLI: 5.4.16 (C:\Users\user\AppData\Roaming\npm\node_modules\ionic) Ionic Framework               : @ionic/angular 4.11.7    @angular-devkit/build-angular : 0.900.2    @angular-devkit/schematics  : 9.0.2    @angular/cli                  : 9.0.2    @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI: 1.2.1 @capacitor/core : 1.2.1

Cordova:

   Cordova CLI: 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0 Cordova Plugins   : cordova-plugin-ionic-keyboard
2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 12 other plugins)

Utility:

   cordova-res: 0.4.0 native-run: 0.2.6

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/@ionic/angular/dist/ionic/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit",
    "analytics": false
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

package.json

{
  "name": "project",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/forms": "~9.0.1",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "@capacitor/android": "^1.4.0",
    "@capacitor/core": "1.2.1",
    "@ionic-native/android-permissions": "^5.19.1",
    "@ionic-native/barcode-scanner": "^5.19.1",
    "@ionic-native/camera": "^5.19.1",
    "@ionic-native/core": "^5.19.1",
    "@ionic-native/file": "^5.19.1",
    "@ionic-native/file-opener": "^5.19.1",
    "@ionic-native/file-transfer": "^5.19.1",
    "@ionic-native/http": "^5.19.1",
    "@ionic-native/in-app-browser": "^5.19.1",
    "@ionic-native/ionic-webview": "^5.19.1",
    "@ionic-native/qr-scanner": "^5.19.1",
    "@ionic-native/splash-screen": "^5.19.1",
    "@ionic-native/status-bar": "^5.19.1",
    "@ionic/angular": "^4.11.7",
    "@ionic/cli": "^6.1.0",
    "@ionic/storage": "^2.2.0",
    "@swimlane/ngx-datatable": "^16.0.3",
    "cordova-android": "^8.1.0",
    "cordova-plugin-advanced-http": "^2.3.1",
    "cordova-plugin-android-permissions": "^1.0.2",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^2.2.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-inappbrowser": "^3.1.0",
    "cordova-sqlite-storage": "^3.4.1",
    "core-js": "^2.6.11",
    "file-saver": "^2.0.2",
    "ionicons": "^5.0.0",
    "ngx-qrcode2": "0.0.9",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "rxjs": "^6.5.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "^0.900.2",
    "@angular-devkit/core": "~9.0.2",
    "@angular-devkit/schematics": "~9.0.2",
    "@angular/cli": "~9.0.2",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@capacitor/cli": "1.2.1",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "phonegap-plugin-barcodescanner": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-advanced-http": {
        "OKHTTP_VERSION": "3.10.0"
      },
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-file-opener2": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

Solution

  • METHOD 1

    Try to run:

    cordova clean
    

    and retry. If not work follow method two

    METHOD 2

    try to run:

    ionic cordova platform rm android
    

    remove your node_modules folder and run

    npm install
    

    and

    ionic cordova platform add android