Put image and text in Tab Label

Dash Python
1

I currently have some tabs and I want to have a string and an image for each label.

so the tab code is written in the following

dcc.Tab(
    id = "Hist",
    label=TAB_NAME,
    value="tab",
),

I have tried to set label equal to multiple divs. However when I do so I get “error loading dependencies”. If I set label equal to:

label= [html.Div([ "hello" ])],

It does work i.e whatever I place inside the div gets shown. However when I inspect the page instead of finding something like

<div> "hello" </div>

I instead find

<!-- react-text: 16 -->
"hello"
<!-- /react-text -->

I don’t know much about Css so I don’t know what that actually means but in any case it isn’t “translating” the code in the way I would expect (it’s also probably why multiple divs don’t work)

Does anyone have a way of doing this or a feasible workaround

Many Thanks

2

I have found a work around since Dash seems to always do the thing described above.

Within the CSS I use ::before to create a Div. By doing it though the CSS code rather than the python code Dash seems to remain content.

1 Like
3

Hi Oliver, can you please elaborate on this “::before” solution? I’m trying to do something similar with Font-Awesome but cannot get the spacing right.

e.g.

    dcc.Tab(
        className="fas fa-bar-chart",
        label=[
            html.Div(
                [
                    "Analysis"
                ],
                style={
                    "textAlign": "center"
                }
            )
        ],
style = {#tab style}
)

It seems that the style in html.Div is override by the outside tab style. I’m wondering if there is a way to do so?

4

I think I put an “\A” before the image (so within content).

5

For me it doesn’t work to set the label as

label= [html.Div([ “hello” ])]

I get the error that the label should be a string and not an array. Can you post a working example please? Thank you so much in advance!