@snehilvj Hi! First of all thank you for this component!
I have a question, since I’m running into this problem.
When running a multi page app, where one of the apps has DashIconify, I can only make it run when debug=True
If I use debug=False the page doesn’t load.
I did some trial and error and as soon as I comment out every instance of DashIconify I have no problems, but as soon as I revert that I have this problem.
Here’s a working example
My main app.py
# -*- coding: utf-8 -*-
# -----------------------------------------------
# LIBRARIES
# -----------------------------------------------
# Import Core Libraries
import pandas as pd
import numpy as np
import plotly.express as px
from datetime import date
# Import Dash and Dash Bootstrap Components
import dash
import dash_daq as daq
from dash import Input, Output, dcc, html, dash_table
import dash_bootstrap_components as dbc
from pages import poi
# -----------------------------------------------
# APP STARTS HERE
# -----------------------------------------------
app = dash.Dash(__name__,title='DashIconify',suppress_callback_exceptions=True,update_title=None,
meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
)
app.css.config.serve_locally = False
app.scripts.config.serve_locally = False
server = app.server
# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 0,
"bottom": 0,
"width": "20rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
"margin-left": "21rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
"background-color": "#FFFFFF",
}
sidebar = html.Div(
[
dbc.Nav(
[
# AUTOMATIC UPDATER
dcc.Interval(
id='interval-component',
interval=10000 * 1000, # in milliseconds
n_intervals=0
),
html.Hr(),
dbc.NavLink("MAIN", href="/", active="exact"),
dbc.NavLink("ICONS", href="/poi", active="exact"),
dbc.NavLink("PAGE 01", href="/1", active="exact"),
dbc.NavLink("PAGE 02", href="/2", active="exact"),
dbc.NavLink("PAGE 03", href="/3", active="exact"),
dbc.NavLink("PAGE 04", href="/4", active="exact"),
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
content = html.Div(id="page-content", style=CONTENT_STYLE)
# -----------------------------------------------
# APP LAYOUT DESIGN
# -----------------------------------------------
app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
@app.callback(Output("page-content", "children"), [Input("url", "pathname"),], prevent_initial_call=True)
def render_page_content(pathname):
if pathname == "/":
return html.P("This is the main page")
elif pathname == "/poi":
return poi.layout
elif pathname == "/1":
return html.P("This is PAGE 01")
elif pathname == "/2":
return html.P("This is PAGE 02")
elif pathname == "/3":
return html.P("This is PAGE 03")
elif pathname == "/4":
return html.P("This is PAGE 04")
# If the user tries to reach a different page, return a 404 message
return dbc.Card(
[
html.H1("404: Not found", className="text-danger"),
html.Hr(),
html.P(f"The pathname {pathname} was not recognised..."),
]
)
# -------------------------------------------------------------------------------------
# -------------------------------- START THE APP -------------------------------------
# -------------------------------------------------------------------------------------
if __name__ == "__main__":
app.run_server(host='0.0.0.0', debug=True)
And here is my poi.py app, inside the folder pages
# -*- coding: utf-8 -*-
# -----------------------------------------------------
# DESCRIPTION
# -----------------------------------------------------
# Showing some Icons from DashIconify
# -----------------------------------------------
# LIBRARIES
# -----------------------------------------------
# Import Core Libraries
import pandas as pd
import numpy as np
import plotly.express as px
# Import Dash and Dash Bootstrap Components
import dash
import dash_daq as daq
from dash import Dash, Input, Output, dcc, html, dash_table, callback
import dash_bootstrap_components as dbc
from dash_iconify import DashIconify
# Legend Card Style
card_icon_legend = {
"color": "#273B80",
"textAlign": "center",
"fontSize": 30,
"margin": "auto",
}
# -----------------------------------------------
# APP LAYOUT
# -----------------------------------------------
layout = html.Div(
[
dbc.Col(
html.P(
DashIconify(icon="ant-design:clock-circle-filled",style=card_icon_legend),
),
xs=1, sm=1, md=1, lg=1, xl=1,
),
],
)
Here you can see the behaviour with debug=False
Here you can see the behaviour with debug=True
Any idea why I’m getting this behaviour?
Here are the versions I’m using for my multi page app
dash == 2.3.1
dash_bootstrap_components == 1.0.2
dash_daq == 0.5.0
dash_iconify == 0.1.0
numpy == 1.21.0
pandas == 1.3.5
plotly == 5.5.0
