Skip to content

bug: Ion Input ClearInputIcon not working - Angular #30901

@antoine-carruana

Description

@antoine-carruana

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

When using ion-input there is a property clearInputIcon where we can put the name of an imported icon as a string, it should replace the icon for the clear option when clearInput property is set to true but I only get the default one

Expected Behavior

When using ion-input there is a property clearInputIcon where we can put the name of an imported icon as a string, it should replace the icon for the clear option when clearInput property is set to true.

Steps to Reproduce

  1. In HTML Set an ion-input
  2. Set property clearInput to true
  3. Set property clearInputIcon to an icon for example "analytics-outline"
  4. In TS/JS import analyticsOutline from ionicons with the addIcons method
  5. You will see that the icon does not change

Code Reproduction URL

https://stackblitz.com/edit/fhf2js9x

Ionic Info

/

Additional Information

I've tested multiple things and the only to make it work is to use the property with binding [] syntax
The problem is that clearInputIcon is not recognized and we need to use the CUSTOM_ELEMENT_SCHEMA which should not happen (since the other properties for example clearInput do not need them).

Without this the component does not seem to recognize and user the clearInputIcon property on the ion-input

Can you check and confirm please ? We should be able to use this property as the other one easily without this, moreover this is not specified in the documentation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions