bug: HTML Elements added via [innerHTML] to ion-label are hidden about ionic-framework HOT 1 CLOSED

Thank you for submitting the issue!

I'm closing this issue since @sean-perkins responded with an answer via Discord:

You will need to use the DomSanitizer API to either by-pass or sanitize the HTML contents.

This is to prevent malicious contents from being injected into your application from untrusted strings.

Previously Ionic Framework had it's own sanitization implementation. However, we decided to move away from it since it was not actively maintained to the standards required from official libraries and framework solutions that are specialized around that problem.

In case the link doesn't work:

// example.component.ts

import { Component, inject } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
})
export class ExampleComponent {
  sanitizer = inject(DomSanitizer);
}

<!-- example.component.html -->

<ion-label
  [innerHTML]="
    sanitizer.bypassSecurityTrustHtml('<span>Span with Innerhtml</span>')
  "
  >Label</ion-label
>

from ionic-framework.