Dash Mantime Components not allowing icons

Question

I am trying to use dash_iconify to use icons in my Plotly Dash App. I am trying to use something similar to this tutorial here: https://www.dash-mantine-components.com/components/navlink

However, in my application when I try to insert an icon inside of my dmc.Navlink, I am getting the following error: TypeError: The dash_mantine_components.NavLink component (version 0.14.0) received an unexpected keyword argument: icon Allowed arguments: active, aria-, autoContrast, bg, bga, bgp, bgr, bgsz, bottom, c, children, childrenOffset, className, classNames, color, darkHidden, data-, description, disableRightSectionRotation, disabled, display, ff, flex, fs, fw, fz, h, hiddenFrom, href, id, inset, label, left, leftSection, lh, lightHidden, lts, m, mah, maw, mb, me, mih, miw, ml, mod, mr, ms, mt, mx, my, n_clicks, noWrap, opacity, opened, p, pb, pe, pl, pos, pr, ps, pt, px, py, refresh, right, rightSection, style, styles, ta, tabIndex, target, td, top, tt, unstyled, variant, visibleFrom, w

I have all libraries installed that should be and I have included the get_icon() function as well. This is the code I am using:

import dash_mantine_components as dmc
from dash import html
from dash_iconify import DashIconify


def get_icon(icon):
    return DashIconify(icon=icon, height=16)


html.Div(
    [
        dmc.NavLink(
            label="With icon",
            icon=get_icon(icon="bi:house-door-fill"),
        ),
        dmc.NavLink(
            label="With right section",
            icon=get_icon(icon="tabler:gauge"),
            rightSection=get_icon(icon="tabler-chevron-right"),
        ),
        dmc.NavLink(
            label="Disabled",
            icon=get_icon(icon="tabler:circle-off"),
            disabled=True,
        ),
        dmc.NavLink(
            label="With description",
            description="Additional information",
            icon=dmc.Badge(
                "3", size="xs", variant="filled", color="red", w=16, h=16, p=0
            ),
        ),
        dmc.NavLink(
            label="Active subtle",
            icon=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            variant="subtle",
            active=True,
        ),
        dmc.NavLink(
            label="Active light",
            icon=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            active=True,
        ),
        dmc.NavLink(
            label="Active filled",
            icon=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            variant="filled",
            active=True,
        ),
    ],
    style={"width": 240},
)

I've tried to roll back to other versions of dash_mantine_components but have not had any luck. This code is straight from the documentation.

Answer 1

Dash Mantime Components relies on Mantine react library, and since v0.14.0 DMC uses Mantine v7 which brings significant changes, among them :

icon prop was renamed to leftSection

That's it !

See also the documentation with examples that match a specific version of DMC.