bug: ion-icon do not load icon if pnpm is used

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

If npm is used and ion-icon refer to a ion-icon name the svg icon loads correctly.

In this example a ion-icon is used and the icon is loaded correctly:

<ion-icon name="eye-off-outline"></ion-icon>

If pnpm is used and ion-icon refer to a ion-icon name the svg icon does not loads correctly.

Expected Behavior

It should work with pnpm the same way as npm.

Steps to Reproduce

Setup an ionic project or use your current project where and ion-icon is used.

Remove node_modules and package-lock.json.

Install dependencies using pnpm.

Run ionic serve.

Code Reproduction URL

No response

Ionic Info

$ ionic info Ionic: Ionic CLI : 6.20.1 (C:\Users\hsantos\AppData\Roaming\nvm\v14.20.0\node_modules@ionic\cli) Ionic Framework : @ionic/angular 6.2.4 @angular-devkit/build-angular : 14.2.1 @angular-devkit/schematics : 14.2.1 @angular/cli : 14.2.1 @ionic/angular-toolkit : 7.0.0

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v14.20.0 (C:\Program Files\nodejs\node.exe) npm : 6.14.17 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks! ionicons should be listed as a direct dependency in our starter applications.

Ionicons is required by @ionic/angular and @ionic/core, so it gets installed to the top level node_modules when using npm. For pnpm this causes issues since ionicons is not installed to the top level node_modules.

I merged a fix to resolve this for new starter applications: https://github.com/ionic-team/starters/pull/1731

For existing applications, the fix is to manually add ionicons as a dependency. As noted in https://github.com/ionic-team/ionic-framework/issues/25846#issuecomment-1231108651.

[maroon1]

@eduboxgithub You can explicitly add ionicons as a dependency in package.json. Because ionicons is a “ghost” dependency, so Angular can not find the ionicons in the root of node_modules directory.

pnpm add ionicons