bug: UI Diference between slot start and end, with ion-icon within ion-item

[FranciskoNeves]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

Expected Behavior

Equal UI

Steps to Reproduce

Place the same ion-icon inside an ion-item with different slots, as reproduced in the Code Reproduction URL.

Code Reproduction URL

https://github.com/FranciskoNeves/IonIconInIonItem

Ionic Info

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/angular 8.2.2 @angular-devkit/build-angular : 18.0.4 @angular-devkit/schematics : 18.0.4 @angular/cli : 18.0.4 @ionic/angular-toolkit : 11.0.1

Capacitor:

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

Utility:

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

System:

NodeJS : v20.11.0 npm : 10.2.4 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Ionic looks to be working correctly here. The UI difference was done to match iOS and Material Design. Icons in the start slot are intended to appear before the item border (see the main screen in iOS Settings app as an example). Icons in the end slot are supposed to appear within the item border (see the "i" information icon in the Wi-Fi screen in the iOS Settings app)

[FranciskoNeves]

Oh sorry I forgot to add a long label... The problem is the distance between the icon and the ion-label, when the slot is end and the label is longer than the item itself, but based on your answer, maybe it's not an UI bug.

[liamdebeasi]

Can you add a demo that shows how the item renders when the label is longer than the item itself?

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ionitron-bot[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.