How to add dbc icon if the multiple page is created under the dash.register_page

Dash Python
1

Hi,

How to add the icon for each page if the multiple page is created under the dash.register_page?



Example:

image





Code:

app.py

sidebar = dbc.Nav(
        [
            dbc.NavLink(
                [
                    html.Div(page["name"], className="ms-2"),
                ],
                href=page["path"],
                active="exact",
            )
            for page in dash.page_registry.values()
        ],
        vertical=True,
        pills=True,
        className="bg-light",
        # style=SIDEBAR_STYLE,
)



app.layout = dbc.Container([
        html.Div([
               dbc.Button(html.I(className ="bi bi-list"), #"Menu",
               id="open-offcanvas", n_clicks=0),
              
             dbc.Offcanvas([
                 dcc.Location(id="url"),
                sidebar,
                content
                ],
         
            id="offcanvas",
            title="Welcome to .../",
            is_open=False,
             ),
       ]),


dbc.Row([
    dbc.Col(html.Div("Tes",
                     style={'fontSize':50, 'textAlign':'center'}))
]),

html.Hr(),

dbc.Row([
         dbc.Col([
                dash.page_container
            ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10)
    ]
)
], fluid=True)




page1.py

dash.register_page(__name__,
               path='/',  # '/' is home page and it represents the url
               name='Home',  # name of page, commonly used as name of link
               title='Main',  # title that appears on browser's tab
               # image='pg1.png',  # image in the assets folder
               # description='Histograms are the new bar charts.'

)

# page 1 data
layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H1('Welcome to ...', className = 'text-center text-primary, mb-4 '
                    ,style={'font-weight': 'bold'}),
        ]),
    ]),
2

Hello @beginof,

You could build a dictionary of the pages with the info you want, and add the icons to the nav bar that way. :grin:

You could use something like this:

utils > page_icons.py

page_info = {}

def page_icon(page, icon):
     page_info[pg] = {'icon': icon}

Then in your pages that you want nav:

from utils.page_icons import page_icon

page_icon(__name__, <my cool icon>)

In your app:

from utils.page_icons import page_info
3

@beginof

One (of the many) cool Pages features is that you can add arbitrary data to the dash.page_registry Adding icons for the page is a great use-case.

For example, you can do this:

dash.registser_page(__name__, path="/", icon="fa fa-home")

Then you can create a sidebar using the data from the page_registry


def sidebar():
    return html.Div(
        dbc.Nav(
            [
                dbc.NavLink(
                    [
                        html.Div(
                            [
                                html.I(className=page["icon"]),
                                page["name"]
                            ], className="ms-2"),
                    ],
                    href=page["path"],
                    active="exact",
                )
                for page in dash.page_registry.values()                
            ],
            vertical=True,
            pills=True,
            className="bg-light",
        )
    )

You can see another example that uses icons from DashIconify here

nested_folders

1 Like
4

Thanks @AnnMarieW for your support.

5

Thanks @jinnyzor for your support.

1 Like