feat: Allow in <ion-icon> to pass directly an hardcoded svg

[SvenBudak]

I use <ion-icon> to visualize the back button in a <ion-toolbar> which is used in a modal.
This is my Syntax:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>{{contact.firstName}} {{contact.lastName}}</ion-title>
        <ion-buttons slot="start">
            <ion-button (click)="dismissModal()">
                <ion-icon slot="icon-only" src="/assets/icons/feather/arrow-left.svg"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

The problem here is, that when the modal gets rendered the svg icon is not instant loaded. It lazy load about 1 second after the modal opens. It would be very helpful if <ion-icon> something like this:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>{{contact.firstName}} {{contact.lastName}}</ion-title>
        <ion-buttons slot="start">
            <ion-button (click)="dismissModal()">
                <ion-icon slot="icon-only">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <line x1="19" y1="12" x2="5" y2="12"></line>
                        <polyline points="12 19 5 12 12 5"></polyline>
                    </svg>
                </ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

[brandyscarney]

Thanks for the issue and apologies for the delay. This should be resolved in the latest version of Ionicons. You can use the icon property to provide either a path to an SVG or the exact SVG data:

ionicons/src/components/icon/icon.tsx

Line 62 in 1962900

@Prop() icon?: any;

We are working on updating the Ionicons documentation for this and are tracking this here: #535

Here is an example using the icon property in JavaScript: https://stackblitz.com/edit/cix8gp?file=index.html