Put image and text in Tab Label

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

    id = "Hist",

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 -->
<!-- /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

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

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.


        className="fas fa-bar-chart",
                    "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?

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

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!