Ionic-Angular: ionicons do not load

[whydoievenneedthis]

Describe the bug Having the following html fragment in a component:

<ion-icon name="add"></ion-icon>

The icon does not appear. There is an attempt to load the svg file, but it returns with a 404:

GET http://localhost:4200/svg/add.svg 404 (Not Found)

Trying to manually open the URL above causes the router to kick in and to redirect to the ** path.

In addition to that, when the application is built, there is no svg directory with the icon files anymore.

angular: 15.0.4 capacitor: 4.6.1 ionic: 6.4.1 ionicons: 6.0.4 (transitive) nx: 15.4.1 nxext/capacitor: 15.2.0 nxext/ionic-angular: 15.1.0

To Reproduce https://github.com/whydoievenneedthis/ionicons-not-loading

Expected behavior The svg file is served correctly and the icon appears in the browser.

Additional context Last time I know this was working, it was with Angular 13 and the old nxtend plugin (I only have two icons in some rarely visited pages, so it took me a while to notice this). Downgrading to angular 14, nx 14, nxext 14 and ionicons 5 did not solve the issue.

[SimonCockx]

@whydoievenneedthis In your project.json file, there should an assets path to the folder node_modules/ionicons/dist/ionicons/svg, i.e.,

...
  "targets": {
      "build": {
          "executor": "@angular-devkit/build-angular:browser",
          "outputs": ["{options.outputPath}"],
          "options": {
              ...
              "assets": [
                 ...,
                  {
                      "glob": "**/*.svg",
                      "input": "node_modules/ionicons/dist/ionicons/svg",  -----> THIS HERE
                      "output": "./svg"
                  }
              ],
...

Can you verify you have this configuration and that your node_modules folder contains the ionicons/dist/ionicons/svg path to the specific icons you would like to load?

[whydoievenneedthis]

@SimonCockx the indicated line is present in the project.json file: https://github.com/whydoievenneedthis/ionicons-not-loading/blob/main/apps/my-app/project.json#L21

However the node_modules folder does not have the dependency in it. It only appears under node_modules/.pnpm/ionicons@6.0.4/node_modules/ionicons/dist/svg, suggesting that the issue is not related to the component versions but to the configuration vs. the package manager used.

I would have to add ionicons as an explicit dependency in order to force it to appear directly under node_modules.

[SimonCockx]

@whydoievenneedthis I guess this is by design of pnpm. It enforces strict dependency resolution, so you cannot (should not) access transitive dependencies without explicitly stating them as a dependency of your project, as opposed to npm. (see https://pnpm.io/next/npmrc#shamefully-hoist)

Since you are directly depending on ionicons, I would say it is fair that you should also directly state ionicons as a dependency.

I'm not sure whether having to do this manually is desirable or not. Could we automatically add ionicons as an explicit dependency to package.json? At what point should we do so? What if you don't need it? I think the least we can do is document this somewhere.

@DominikPieper @whydoievenneedthis what do you think?

[DominikPieper]

@SimonCockx mhh not sure yet. I’ll do Sonne experiments cause I usually don’t use pnpm that often. I plan to do some stuff around the ionic packages the next time