How to use a feathericons in Dash app?

Dash Python
2

You can set the data-feather property in html.I by unpacking a dictionary as keyword arguments

html.I(className="align-middle", **{"data-feather": "shopping-bag"})

The challenging thing though is that you need to call feather.replace() to insert the SVGs, and because the app content is populated by React, the <i> doesn’t exist in the layout at the time the scripts are loaded.

One way to work around this is to use a clientside callback that is triggered by something like the id of a component in your layout, and then call feather.replace() inside it. When your Dash app starts up, the initial call of the clientside callback will happen after your layout is populated and replace the icons correctly. Here’s an example of that

import dash
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(external_scripts=["https://unpkg.com/feather-icons"])

app.layout = html.Div(
    html.I(id="icon", **{"data-feather": "shopping-bag"}),
    id="content",
)


app.clientside_callback(
    """
    function(id) {
        feather.replace();
        return window.dash_clientside.no_update
    }
    """,
    Output("content", "className"),
    Input("content", "id"),
)


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

This simple example works, but I think it will probably start to break down if you have an app where icons aren’t in the initial layout (e.g. if you’re making a multi-page app).

The best solution (though also a nontrivial amount of work) might be to use the dash-component-boilerplate to wrap react-feather and make the icons available as Dash components.

1 Like