Dash Iconify

0.1.2 · active · verified Thu Apr 16

Dash Iconify is a component library for Plotly Dash applications that integrates over 100,000 vector icons from the Iconify ecosystem. It dynamically fetches only the icons needed, offering an efficient way to enhance the visual appeal and user experience of Dash apps. The library is actively maintained with periodic updates.

Common errors

```
DashIconify icon not showing
```
cause The `icon` prop string might be incorrectly formatted, the icon set might not exist, or network issues prevent fetching the icon data from the Iconify CDN.

fix Verify the icon string (e.g., `ion:logo-github`) against the official Iconify gallery. Check the browser's developer console for network errors or failed requests to Iconify assets.
```
ModuleNotFoundError: No module named 'dash_iconify'
```
cause The `dash-iconify` package is not installed in the active Python environment.

fix Install the library using `pip install dash-iconify`.
```
DashIconify flickering on page load or causing layout shifts.
```
cause The icon's dimensions are initially 0px, leading to a reflow when the actual dimensions are rendered.

fix Set explicit `width` and `height` properties for the `DashIconify` component, e.g., `DashIconify(icon="...", width=24, height=24)`.
```
Iconify icon will not display next to Textarea / other component.
```
cause Default inline display properties or parent container styling may prevent `DashIconify` from aligning as expected with other Dash components.

fix Use Dash layout components like `dash_bootstrap_components.Row`, `dash_bootstrap_components.Col`, or `dash_mantine_components.Group` to manage alignment. Apply CSS `display` properties (e.g., `display='inline-flex'`, `alignItems='center'`) via the `style` prop to the parent container or the `DashIconify` component itself.

Warnings

breaking The `icon` prop behavior was fixed in version `0.1.0`. Code relying on previous, potentially buggy behavior of the `icon` prop might need adjustments.
Fix: Ensure `icon` prop values conform to the `icon-prefix:icon-name` format as per Iconify documentation. Update to `dash-iconify>=0.1.0`.
gotcha Icons may 'flicker' or cause layout shifts on initial page load if their `width` and `height` are not explicitly defined, as they initially render at 0px.
Fix: Always set explicit `width` and `height` props on `DashIconify` components to pre-allocate space and prevent layout reflow. Example: `DashIconify(icon="...", width=24, height=24)`.
gotcha Using local or self-hosted icons with `DashIconify` requires additional setup involving custom Flask routes and JavaScript assets to serve the icon data.
Fix: Refer to the Dash Iconify documentation or community forums for examples on how to configure custom `IconifyProviders` in your `assets` folder and add a Flask route to serve local icon JSON files.
gotcha The `className` prop was introduced in version `0.1.2`. Users on earlier versions attempting to use this prop for custom styling will find it unsupported.
Fix: Upgrade to `dash-iconify>=0.1.2` to utilize the `className` prop for applying custom CSS classes. For older versions, use the `style` prop for inline styling.

Install

pip install dash-iconify Pip

Imports

DashIconify
```
from dash_iconify import DashIconify
```

Quickstart

This quickstart demonstrates how to initialize a Dash app and incorporate multiple icons using the `DashIconify` component. Icons are specified using a string in the format `icon-prefix:icon-name`, and their size and color can be customized with `width` and `color` props.

import dash
from dash import html
from dash_iconify import DashIconify

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("My Dash App with Icons"),
    DashIconify(icon="ion:logo-github", width=30, color="#181717"),
    DashIconify(icon="dashicons:align-wide", width=40, color="#0073AA"),
    DashIconify(icon="fa6-brands:python", width=50, color="#306998")
])

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

view raw JSON →