bug: addIcons does not work for ionic components anymore

[Spinnenzunge]

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

Current Behavior

Configurating the default detail-icon, searchbar-icon etc. does not work anymore with overwriting the ionicon name with addIcons()

This was the proposed and accepted solution from Issue #22946 to globally set custom icons for searchbar, item detail, etc.

Expected Behavior

overwriting icon defaults with addIcons does work on components (again)

Steps to Reproduce

• Setup new project
• Overwrite default icon that is used on a component with addIcon

Code Reproduction URL

https://github.com/Spinnenzunge/component-icon-defaults

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (/Users/pascalgraf/.nvm/versions/node/v14.17.6/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.7
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.4.1
   @capacitor/android : not installed
   @capacitor/core    : 3.4.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v14.17.6 (/Users/pascalgraf/.nvm/versions/node/v14.17.6/bin/node)
   npm    : 7.23.0
   OS     : macOS Big Sur

Additional Information

No response

[sean-perkins]

Hello @Spinnenzunge thanks for reporting this issue.

In v6.0.5 we made the decision to inline the SVG assets used by various web components to improve the bundle size output of Ionic (#24671). This change effectively breaks the addIcons override approach from the ionicons package.

I don't believe we have any intention to revert the change, as the alternative is that every icon asset is added to the bundle, even when only using a select few.

This requires a larger team discussion than just myself. The icons you could previously extend, do not have an equivalent override method. We use the IonicConfig in a few places, such as for backButtonIcon to allow implementers to override the icon across their whole application, but do not offer the same API for detailIcon and others. Introducing a new API to customize icons would fall in a minor release target.

I'll follow-up after having the team discussion. In the interim you can downgrade to 6.0.4 to avoid this change in your application.

[sean-perkins]

@Spinnenzunge I discussed with the team and I have drafted a feature request to cover an API pattern to handle the previous behavior: #24768.

Please add your thoughts to that feature request, if there's an alternative pattern that would be more convenient or if there are specific icons you want to make sure we consider.

We have also tentatively added this feature request to the 6.1 target.

I'll close out this issue, but will reference it from the new feature request. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.