dcc.Tab: How to insert a svg icon or img inside a dcc.Tab? CSS?

Dash Python
1

Hello,
Question is in the title, I’ve 15 tabs representing countries and I would like to add the flag of each country inside the tab label.

Is there any easy way to do it or do i have to define some CSS class and some workaround?

2

CSS is the way to go. Adding a class for each tab, it’s possible to add one (or more) background image(s) (.png, .svg,…), with the right size, at the right position.

3

@David22 Hey David, Can you explain how to do it using an example?

4

Hello,
Let me show you an example:

 dcc.Tabs(

        id="tabs_with_hlr",
        value='ss7_routing',
        parent_className='custom-tabs',
        className='custom-tabs-container',
        children=[
            dcc.Tab(
                label='Feed',
                value='Feed',
                className='custom-tab',
                selected_className='custom-tab--selected'
            ),
            dcc.Tab(
                label='Feed',
                value='Feed',
                className='custom-tab',
                selected_className='custom-tab--selected'
            ),
        ]),

.custom-tabs-container {
    width: 85%;
}
.custom-tabs {
    border-top-left-radius: 3px;
    /*background-color: #f9f9f9;*/
    padding: 0px 24px;
    border-bottom: 1px solid #d6d6d6;
}

.custom-tab {
    background: url("/dash/assets/icons/feed1.svg") no-repeat;
    background-position: 10%;
    color:#586069;
    width: 100px !important;
    height: 25px !important;
    font-size: 12px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 3px solid transparent !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 0px !important;
    background-color: #fafbfc;
    padding: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.custom-tab--selected {
    background: url("/dash/assets/icons/feed1.svg") no-repeat;
    background-position: 10%;
    color: black;
    box-shadow: 1px 1px 0px white;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-top: 1px solid lightgrey !important;
}

image
image1168×338 8.56 KB

4 Likes
5

Thank you so much @dilfin07