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 (cordova-lib@12.0.1)
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