Support for tabler-icons in addition to material design icons

[banesullivan]

My impression is that trame has great support for material design icons, but support for other icon sources is not as streamlined. This has been my experience at least. I'm curious if trame could implement 1st class support for https://tabler.io/icons as well. I often find tabler-icons to have exactly what I'm looking for when i struggle to find icons from MDI. For example, frustums. This would bring trame into alignment with many other open source frameworks that support named tabler-icons, one example being HoloViz's Panel.

[jourdain]

While you are right by saying they are not streamlined, they are fairly easy to add without any trame change or pip install.
But I would not mind adding a trame-tabler to further streamline it and enable non-internet access support.

But by adding 2 lines to your code, you can enable the tabler-icons:

1. server.enable_module({"styles":["https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/tabler-icons.min.css"]})
2. client.Style(".ti.mdi:before{font-family:tabler-icons;}")

You can find a full working example here

Otherwise, a strip down version of it has been pasted below

from trame.app import get_server
from trame.ui.vuetify3 import VAppLayout
from trame.widgets import vuetify3, html, client

server = get_server(client_type="vue3")

# 1. Grab the font
server.enable_module(
    dict(
        styles=[
            "https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/tabler-icons.min.css"
        ]
    )
)


with VAppLayout(server, full_height=True):
    # 2. Force .ti font-family
    client.Style(".ti.mdi:before{font-family:tabler-icons;}")

    with vuetify3.VContainer(fluid=True, classes="full-height"):
        # Tabler icons
        with vuetify3.VCard(classes="d-flex justify-space-around align-center ma-4"):
            vuetify3.VIcon(
                color="green-darken-2",
                icon="ti ti-ghost-2",
                size="x-small",
            )
            vuetify3.VIcon(
                color="blue-darken-2",
                icon="ti ti-ghost-3",
                size="small",
            )
            vuetify3.VIcon(
                color="purple-darken-2",
                icon="ti ti-pacman",
                size="medium",
            )
            vuetify3.VIcon(
                color="teal-darken-2",
                icon="ti ti-layout-sidebar-right",
                size="large",
            )
            vuetify3.VIcon(
                color="blue-grey-darken-2",
                icon="ti ti-layout-sidebar-right-filled",
                size="x-large",
            )

server.start()

[banesullivan]

Aha! Awesome, this is just what I needed. Thanks for providing this example!