Skip to content

bug: ion-icon [src] binding for string value regression after stencil upgrade #30629

@andrzejpindor

Description

@andrzejpindor

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

ion-icon using the [src] binding with string value inside a popover without ion-content stopped rendering.

Notes:
I know [src]="'value'" is redundant compared to src="value", but it worked fine before the update.

This seems to be a regression since the same Angular + Ionic code works perfectly in 8.7.0 but breaks in 8.7.1.

While ion-content is recommended, I don’t think it’s strictly required, and this issue might reveal another underlying bug.

Example of broken code:

<ion-icon
  [src]="'https://ionicframework.com/docs/logos/ionic-text-docs-dark.svg'">
</ion-icon>

Example that works:

<ion-icon
  src="https://ionicframework.com/docs/logos/ionic-text-docs-dark.svg"
  size="large">
</ion-icon>

Expected Behavior

ion-icon src should be rendered as before, regarding if string value (url) will be provided using [src]="''" or src=""

Steps to Reproduce

  1. Create a component containing an ion-icon with a custom [src] binding pointing to valid svg url
  2. ✅ Display the component inline → works.
  3. ✅ Display the component inside a popover with ion-content → works.
  4. ❌ Display the component inside a popover without ion-content → icon does not render.

Reproduction repo:
StackBlitz reproduction

Code Reproduction URL

https://stackblitz.com/~/github.com/andrzejpindor/ionic-icon-bindings-regression-repro?file=src/app/foo-ion-content/foo-ion-content.component.html:L9-L11

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.1 
   Ionic Framework               : @ionic/angular 8.7.2
   @angular-devkit/build-angular : 19.2.15
   @angular-devkit/schematics    : 19.2.15
   @angular/cli                  : 19.2.15
   @ionic/angular-toolkit        : 12.3.0

Utility:

   cordova-res : 0.15.4
   native-run  : 2.0.1

System:

   NodeJS : v20.15.1 (/Users/andrzejpindor/.local/share/nvm/v20.15.1/bin/node)
   npm    : 10.7.0
   OS     : macOS Unknown

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    stencilIssues that require changes in Stenciltype: buga confirmed bug report

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions