bug: ion-note does not center in ion-item in Angular18/Ionic 8 app

[donnydg4]

Describe the Bug

ion-note does not center in my ion-item. I have tried what I know - I have no global css variables for it. I don't know what's going wrong:

Expected Behavior

ion-note should properly align like in the stackblitz: https://stackblitz.com/edit/angular-4fnrmj?file=src%2Fapp%2Fexample.component.html

Steps to Reproduce

I copied over the code from the Ionic stackblitz.
I pasted it into my project and imported everything.
I ran the code and it doesn't align properly

Screenshots

No response

Operating System

Windows 11

Browser

Chrome/Edge

Version

Whatever the newest is

Additional Information

Here is my code:
<ion-card-content> <ion-item [button]="true" lines="none"> <ion-note slot="start">1</ion-note> <ion-label> <h2>H2 Heading</h2> <p>Paragraph</p> </ion-label> <ion-note slot="end">6:11</ion-note> </ion-item> <ion-item lines="none"> <ion-note slot="start">1</ion-note> <ion-label> <h2>H2 Heading</h2> <p>Paragraph</p> </ion-label> <ion-note slot="end">6:11</ion-note> </ion-item> </ion-card-content>
dependencies:
"dependencies": { "@angular/animations": "^18.2.0", "@angular/cdk": "^18.2.0", "@angular/common": "^18.2.0", "@angular/core": "^18.2.0", "@angular/forms": "^18.2.0", "@angular/material": "^18.2.0", "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", "@capacitor/clipboard": "^6.0.0", "@ionic/angular": "8.4.0", "@ionic/core": "8.4.0", "express": "^4.18.2", "howler": "^2.2.4", "ionicons": "^7.4.0", "ngx-pagination": "^6.0.3", "path": "^0.12.7", "rxjs": "~7.8.0", "swiper": "^9.4.1", "tslib": "^2.2.0", "zone.js": "~0.14.10" },