bug: ion-icons have different sizes when combined with ion-toggle, ion-checkbox or ion-radio inside of an ion-item

[FranciskoNeves]

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

v7.x

Current Behavior

I have a list off settings, and each setting (ion-item) have an icon at start (ion-icon) and a setting after the icon (ion-select, ion-label and ion-toggle). With ion-select and ion-label, the icon has the same width and height(ex: 24x24) but when I use the ion-toggle the icon has a different size(ex: 23x24).

Expected Behavior

The icon should stay with the same size in every situation.

Steps to Reproduce

This is the code to reproduce the behaviour:

<ion-list>

<ion-item lines="none" >
  <ion-icon name="school" color="primary"></ion-icon>
  <ion-select class="ion-item-end" interface="popover" (ionChange)="chooseIntro($event)" placeholder="{{ 'introPlaceholder' | translate }}" cancelText="{{ 'cancel' | translate }}"
    okText="{{ 'ok' | translate }}" label="{{ 'tutorial' | translate }}" labelPlacement="start">
    <ion-select-option *ngFor="let intro of globalService.tutorialPages" [value]="intro">
      {{ intro.Title | translate }}
    </ion-select-option>
  </ion-select>
</ion-item>

<ion-item lines="none">
  <ion-icon name="compass" color="primary"></ion-icon>
  <ion-toggle color="primary" justify="space-between" (ionChange)="updateLocation()" [(ngModel)]="globalService.storedLocationShare">
    {{ "locationShare" | translate }}
  </ion-toggle>
</ion-item>

<ion-item lines="none" (click)="openSetting()">
  <ion-icon name="options" color="primary" ></ion-icon>
  <ion-label class="ion-text-start" color="primary">{{ "preferences" | translate }}</ion-label>
</ion-item>
</ion-list>

Code Reproduction URL

https://github.com/FranciskoNeves/IonToggleIonIconConflict

Ionic Info

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/angular 7.8.1
@angular-devkit/build-angular : 17.3.1
@angular-devkit/schematics : 17.1.3
@angular/cli : 17.1.3
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 5.7.4
@capacitor/android : 5.7.4
@capacitor/core : 5.7.4
@capacitor/ios : 5.7.4

Cordova:

Cordova CLI : 12.0.0 ([email protected])
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

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

System:

Android SDK Tools : 26.1.1
NodeJS : v18.19.0
npm : 10.2.3
OS : Windows 10

Additional Information

No response

[brandyscarney]

Thanks for the issue! I was able to reproduce this using your example. This is also happening with the ion-checkbox and ion-radio components. As a workaround, you should be able to apply the following CSS:

ion-item ion-icon {
  flex-shrink: 0;
}

Here is a demo: https://codepen.io/brandyscarney/pen/vYMrZGe

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