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>
[...]