bug: [innerHTML] on ion-label dosent work as expected on Ionic 8

[sithwarrior]

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

v8.x

Current Behavior

Adding html to an ion-label with [innerHtml] doesn't work, it did previously in ionic 7.

also adding innerHTMLTemplatesEnabled: true to the config

Expected Behavior

Adding html to a ion-label with [innerHtml] should work

also adding innerHTMLTemplatesEnabled: true to the config

Steps to Reproduce

<ion-item> <ion-label [innerHtml]="'<p>This should work</p>'"></ion-label> </ion-item>

Code Reproduction URL

https://stackblitz.com/edit/4hy6h5c4-yxhr5h8m?file=src%2Fapp%2Fexample.component.html

Ionic Info

Ionic:

Ionic CLI : 6.20.9 (/Users/martinbech/.npm-packages/lib/node_modules/@ionic/cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 18.2.12
@angular-devkit/schematics : 14.2.3
@angular/cli : 18.2.12
@ionic/angular-toolkit : 7.0.0

Utility:

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

System:

NodeJS : v20.18.0 (/Users/martinbech/.nvm/versions/node/v20.18.0/bin/node)
npm : 10.8.2
OS : macOS Unknown

Additional Information

I think this should be aligned with how other ionic components work

[thetaPC]

Thank you for submitting the issue!

This is still possible in Ionic 8. The issue that you are encountering is due to IonIcon being missing from the imports as stated in the terminal:

Closing this issue as it can be solved by updating example.component.ts to the following:

import { Component } from '@angular/core';
import { IonLabel, IonItem } from '@ionic/angular/standalone';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonLabel, IonItem],
})
export class ExampleComponent {}

[rmcroft]

@thetaPC your statement might be true for @sithwarrior code to reproduce but if you copy the code into an ionic app its not going to show up <ion-item> <ion-label [innerHtml]="'<p>This should work</p>'"></ion-label> </ion-item>

[thetaPC]

@rmcroft The proposed solution has been verified to work on an Ionic app. If you're still experiencing issues then please open a new issue with a minimal repro. Thanks!