Referenced ionicon not found 404

Ionic Framework Ionic Angular
1

Hi, I’m new to Ionic and trying to implement it into an angular project. For some reason I cannot use ionicons, it just keeps giving me a 404. I’m using Ionic 6.5.0:

Simple page:

<ion-tabs>
  <ion-tab-bar slot="top">
    <ion-tab-button tab="user">
      <ion-icon name="people-outline"></ion-icon>
      <ion-label>User</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

The tab bar is created, with only the text “user” and if I look in the developer console I get this error:

GET http://localhost:4200/svg/people-outline.svg 404 (Not Found)

What am I missing here?

Package.json looks like this:

{
  "name": "order-client",
  "version": "0.0.0",
  "workspaces": [
    "functions"
  ],
  "scripts": {
    "build": "npm run ng-build && cap sync",
    "ng": "ng",
    "ng-start": "ng serve",
    "ng-build": "npm run ng-build-shared & npm run ng-build-app",
    "ng-build-app": "ng build order-client-app",
    "ng-build-shared": "ng build order-client-shared",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "android-start": "cap open android"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/fire": "^7.5.0",
    "@angular/forms": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "@capacitor/android": "^4.6.2",
    "@capacitor/camera": "latest",
    "@capacitor/core": "latest",
    "@capacitor/splash-screen": "latest",
    "@ionic/angular": "^6.5.0",
    "@ionic/core": "^6.5.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.2",
    "@angular/cli": "~15.1.1",
    "@angular/compiler-cli": "^15.1.0",
    "@capacitor/cli": "latest",
    "@types/jasmine": "~4.3.0",
    "firebase-tools": "^11.21.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ng-packagr": "^15.1.0",
    "typescript": "~4.9.4"
  }
}
2

Hi, you can check the angular.json configuration file, it should have the following settings:

This settings is mandatory in order to make the ionicon work properly.

Also, if you using pnpm instead of npm, the ionicons package should be installed as a dependency:

Reference: fix(dependencies): ionicons is now listed as a dependency by liamdebeasi · Pull Request #1731 · ionic-team/starters · GitHub

1 Like
3

Name of the icon may change for each version of ionicons.

Go to this folder “node_modules/ionicons/dist/ionicons/svg” and search for the name of the icon you have used

the console will log the error if the if the icon is not present in the folder.

Instead use the name which is present in the folder respective to that icon