I am loading symbols dynamically from an API endpoint. I am using iconify/svelte to render icons.

My code looks like this:

<script lang="ts">
    import Icon from 'iconify/svelte';
    
    type NewsItem = {
        id: string;
        link: string;
        title: string;
        tags: Array<{symbol: string; name: string;}></>
    }
    
    const { data } = $props();


    const newsItem: NewsItem = $derived(data.newsItem);

</script>

<main>
    {#if newsItem}

        <div class="news-detail-tags">
            {#each newsItem.tags as newsItemTag (newsItemTag)}
                <a
                    class="news-detail-tag"
                    data-sveltekit-preload-data="off"
                    href={newsItem.link}
                >
                    <Icon icon={'cryptocurrency-color:' + newsItemTag.symbol} />
                    <span class="news-detail-symbol">
                        {newsItemTag.symbol}
                    </span>
                </a>
            {/each}
        </div>
    {/if}
</main>

Symbols that exist such as btc work fine because cryptocurrency-color:btc exists and can be loaded. I often run into symbols that dont exist because the API is not in my control.

Reading the documentation for cryptocurrency-icons it seems they provide a fallback icon that you can use for symbols that don't exist in their iconbase.

How do I specify that a fallback should be rendered?

Something like

<Icon icon={'cryptocurrency-color:' + newsItemTag.symbol} fallback='cryptocurrency-color:generic' />

Their documentation mentions a method called iconExists. However their maintainers claim that it only checks if the icon is in local storage and not on their API

How to provide a fallback icon when you are loading these dynamically?