DashIconify - Wrapper over Iconify

Hi all,
I just released a small utility component called DashIconify: a wrapper over Iconify. You can use this to add icons in your dash apps from a collections of over 100,000 vector icons.

Docs

Why use this?
Iconify fetches only the icons you specify. You can use icons from over 100 icon sets without loading all of them.
Just go over to https://icon-sets.iconify.design and search for the desired icon and use DashIconify to use that in your dash app.

Installation
pip install dash-iconify

Usage

from dash_iconify import DashIconify
from dash import Dash

app = Dash(__name__)

app.layout = DashIconify(
    icon="ion:logo-github",
    width=30,
    height=30,
    rotate=1,
    flip="horizontal",
)

if __name__ == "__main__":
    app.run_server(debug=True)

Usage with Dash Mantine Components
dmc components support passing components other than children. For example,

import dash_mantine_components as dmc
from dash_iconify import DashIconify

button = dmc.Button("Send Mail", leftIcon=[
    DashIconify(icon="fluent:folder-mail-16-filled")
])
9 Likes

I really love this component! So simple, so usefull :blush:

1 Like

Love this! :relaxed:

1 Like

Love this component! :+1:

1 Like

@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

Apparently this happens because somehow @snehilvj’s package was deleted from npm https://www.npmjs.com/package/dash_iconify meaning that https://unpkg.com/ can’t serve the static files and my colleague [João Pina aka Tomahock] thinks dash for default uses unpkg when app.scripts.config.serve_locally = False which is one of the conditions of the app we are working on.

Thanks for reporting, I’ll have a look at why this happened.

Edit: The issue is resolved now and the package is back on npm. Please update to latest version: 0.1.2.

2 Likes