So, I have a piece of ionic code in an angular app that looks like this:

            <ion-item>
                <ion-input class="text-input" type="text" disabled>
                    <ion-icon name="clipboard-outline" clear item-right
                        icon-only (click)="copy()">
                    </ion-icon>
                </ion-input>
            </ion-item>

However, two things happen:

1. the clipboard icon does not show up, even though I can see the element when I inspect the code, and can also invoke the click function when I click on the space where it should be. So essentially the icon is invisible.

2. in addition to the above the icon is positioned to the left of the ion-input text field which seems kind of bizarre as well since I have the item-right property inside ion-icon

Could anyone please help with this? I have also tried adding css classes to alter positioning the icon to the right but they do not work either. I am using Ionic version 6.0.7 and Angular version 13 Would be great if anyone could help with this. Thank you.