bug: Standalone IonIcon type does not expose any component properties

[zolakt]

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, v8.x

Current Behavior

I have a custom directive on IonIcon which modifies the "name" and "src" attributes.
For example:

import { Directive, OnInit } from '@angular/core';
import { IonIcon } from '@ionic/angular';

@Directive({
    selector: 'ion-icon[name]',
    standalone: true,
    providers: [IonIcon]
})
export class FontIconDirective implements OnInit {
    constructor(private host: IonIcon) {
    }

    public ngOnInit(): void {
        const name = this.host.name;

        if (name) {
            this.host.name = undefined;
            this.host.src = 'data:text/plain,' + name;
        }
    }
}

Everything works fine if I import from
import { IonIcon } from '@ionic/angular'

But if I import the standalone component, it doesn't have "name" and "src" properties
import { IonIcon } from '@ionic/angular/standalone';

The non-standalone IonIcon extends Components.IonIcon, which contains there properties:

But the standalone version doesn't extend it:

Is this intentional or a bug? It looks like a bug to me, since I see other standalone components do extends the Components interfaces, e.g:

If it is intentional, what type should I inject then, to get access to those properties?

It does work if I leave it non-standalone, but that is the only remaining place where I import non-standalone, and I'd like to avoid that. Also, with the new Angulars ESBuild, vite is throwing these warnings #28576, I suspect due to this non-standalone import

Expected Behavior

Standalone IonIcon should extend Components.IonIcon

Steps to Reproduce

No special reproduction steps.
Whenever you use the IonIcon from import { IonIcon } from '@ionic/angular/standalone'; none of the component properties are exposed. In injection, ViewChild, ContentChild...etc. Whenever you need to programmatically reference it

Code Reproduction URL

There is no need for a repo

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\lib\index.js
   - C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\index.js
   - C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\bin\ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\lib\index.js
   - C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\index.js
   - C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.1.5 (C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.2.3
@angular-devkit/build-angular : 17.3.1
@angular-devkit/schematics : 17.3.1
@angular/cli : 17.3.1
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.0
@capacitor/android : not installed
@capacitor/core : 6.1.0
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v18.13.0 (C:\Program Files\nodejs\node.exe)
npm : 8.19.3
OS : Windows 10

Additional Information

I can do this as a workaround, and it seems to work, but it's dirty...

import { Directive, OnInit } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';
import { Components } from '@ionic/core/dist/types/interface'

@Directive({
    selector: 'ion-icon[name]',
    standalone: true,
    providers: [IonIcon]
})
export class FontIconDirective implements OnInit {
    constructor(private host: IonIcon) {
    }

    public ngOnInit(): void {
        const component = <IonIcon & Components.IonIcon>this.host;
        const name = component.name;

        if (name) {
            component.name = undefined;
            component.src = 'data:text/plain,' + name;
        }
    }
}

[thetaPC]

Thank you for submitting the issue!

It would help speed up the process if you can provide a minimal repro that shows the error.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[zolakt]

I really don't see what you want reproduced. I've been pretty clear and detailed in the description. This is not some hidden issue that needs debugging or reproduction repos. You are missing an extends in typescript.

[thetaPC]

It likely is a simple fix, but to be sure—and to confirm it wasn’t left out intentionally—we’d need a minimal reproduction. That’ll help us investigate the issue properly.

[zolakt]

I'm still not following what you want, and honestly don't have the time to needlessly do this. Reproduce what? This isn't a functional error that gets thrown. You are missing an extend in typescript. That is it. It actually has all of those fields, it's just the typescript declaration that is missing, so it can be strongly-typed properly. I really think I have been as clear as possible in initial message. What would a reproduction repo possibly add additionally? This isn't a runtime error. It's declarational. Just inspect the code in any IDE

[thetaPC]

It took me a while to fully understand your setup, which is part of the reason why a minimal reproduction was requested in the first place. Minimal repros are not just helpful—they’re required when submitting bugs, as they allow us to efficiently pinpoint and address issues without having to reverse-engineer complex configurations or assumptions.

I ended up creating a minimal repro using the basic usage example from ion-icon. By updating the example.component.ts file as follows:

import { Component } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';

import { addIcons } from 'ionicons';
import { logoIonic } from 'ionicons/icons';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonIcon],
})
export class ExampleComponent {
  private icon!: IonIcon;

  constructor() {
    /**
     * Any icons you want to use in your application
     * can be registered in app.component.ts and then
     * referenced by name anywhere in your application.
     */
    addIcons({ logoIonic });

    this.icon.name = 'checkbox';
    this.icon.src = 'test';
  }
}

Hopefully this illustrates how straightforward it can be to isolate a problem. Providing a minimal reproduction not only saves everyone's time—it ensures issues get looked into faster.

Now that I have a reproducible case, the team can look into a solution. Thanks!