{"id":7131,"library":"dash-iconify","title":"Dash Iconify","description":"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.","status":"active","version":"0.1.2","language":"en","source_language":"en","source_url":"https://github.com/snehilvj/dash-iconify","tags":["dash","plotly","icons","web development","ui","front-end"],"install":[{"cmd":"pip install dash-iconify","lang":"bash","label":"Pip"}],"dependencies":[{"reason":"Peer dependency for all Dash component libraries.","package":"dash","optional":false},{"reason":"Runtime environment requirement.","package":"python","optional":false}],"imports":[{"symbol":"DashIconify","correct":"from dash_iconify import DashIconify"}],"quickstart":{"code":"import dash\nfrom dash import html\nfrom dash_iconify import DashIconify\n\napp = dash.Dash(__name__)\n\napp.layout = html.Div([\n    html.H1(\"My Dash App with Icons\"),\n    DashIconify(icon=\"ion:logo-github\", width=30, color=\"#181717\"),\n    DashIconify(icon=\"dashicons:align-wide\", width=40, color=\"#0073AA\"),\n    DashIconify(icon=\"fa6-brands:python\", width=50, color=\"#306998\")\n])\n\nif __name__ == '__main__':\n    app.run_server(debug=True)","lang":"python","description":"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."},"warnings":[{"fix":"Ensure `icon` prop values conform to the `icon-prefix:icon-name` format as per Iconify documentation. Update to `dash-iconify>=0.1.0`.","message":"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.","severity":"breaking","affected_versions":"<0.1.0"},{"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)`.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"Using local or self-hosted icons with `DashIconify` requires additional setup involving custom Flask routes and JavaScript assets to serve the icon data.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<0.1.2"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"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.","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.","error":"DashIconify icon not showing"},{"fix":"Install the library using `pip install dash-iconify`.","cause":"The `dash-iconify` package is not installed in the active Python environment.","error":"ModuleNotFoundError: No module named 'dash_iconify'"},{"fix":"Set explicit `width` and `height` properties for the `DashIconify` component, e.g., `DashIconify(icon=\"...\", width=24, height=24)`.","cause":"The icon's dimensions are initially 0px, leading to a reflow when the actual dimensions are rendered.","error":"DashIconify flickering on page load or causing layout shifts."},{"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.","cause":"Default inline display properties or parent container styling may prevent `DashIconify` from aligning as expected with other Dash components.","error":"Iconify icon will not display next to Textarea / other component."}]}