Custom Icons Not Display on ``md`` Theme

[KiddoV]

Describe the bug

I use Fontawesome as custom icons on the tab bar.

With the ios theme, everything works as expected:

However, with the md theme, the icons disappear:

I notice that because on md theme, we have this CSS:

.md .tabbar i.icon::before, .md .tabbar-icons i.icon::before {
    content: ''; //<======== this override the ``FA icon class``
    width: 64px;
    height: 32px;
    border-radius: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scaleX(0.5);
    background: var(--f7-tabbar-link-active-icon-bg-color);
    opacity: 0;
    transition-duration: 200ms;
    z-index: -1;
}

The above CSS is the rounded pills that highlight the active tab. The content: ''; would override my custom icon class for Fontawesome:

.fa-circle-dollar-to-slot:before, .fa-donate:before {
    content: "\f4b9";
}

Is there anyway to get around with this? Can we change the rounded pill to use ::after instead of ::before so it would not conflict with Fontawesome CSS?

Thanks,

Additional contents

app.svelte

<script lang="ts">
[...]
// Application main tabs props
const main_tab_props = [
	{label: "Overview", icon: "fas fa-circle-dollar-to-slot", tab: "tab-overview", url: "/"},
	{label: "People", icon: "fas fa-users", tab: "tab-people", url: "/people/"},
	{label: "Chats", icon: "fas fa-comments-dollar", tab: "tab-chats", url: "/chats/"},
	{label: "More", icon: "fas fa-bars", tab: "tab-more", url: "/more/"}
]
[...]
</script>

[...]
    <!-- Views/Tabs container -->
    <Views tabs class="safe-areas">
        <Toolbar class="custom-icon" tabbar icons bottom>
            {#each main_tab_props as tab, i}
            <Link tabLink="#{tab.tab}" tabLinkActive={i == 0 ? true : false} icon={tab.icon} text={tab.label} />
            {/each}
        </Toolbar>
        
        <!-- Main Views -->
        {#each main_tab_props as tab, i}
        <View id={tab.tab} main={i == 0 ? true : false} tabActive={i == 0 ? true : false} tab url={tab.url} />
        {/each}
    </Views>
[...]

[Matthew-Kilpatrick]

I've also been caught out by this issue. For anyone looking for a solution, I was able to work around this bug by stopping using the icon prop of the Link component to specify the FA icon class, and instead placing the icon data inside the component's slot, with the FA icon element wrapped inside an element with the icon class (to retain the styling for active links, icon sizing, etc).

<Link tabLink="#example" text="Example">
    <i class="icon">
        <i class="fa fa-question">
            {#if iconBadge}<span class="badge color-primary">{iconBadge}</span>{/if}
        </i>
    </i>
</Link>

I ended up creating a new ToolbarLink component in my project to contain the workaround code, so I can avoid copy-pasting the workaround code everywhere in the project.