How to add increase or decrease arrow in div component based on value of html.Span in dash webapp?

Dash Python
3

Hey @Moo

Here’s another cool option using the Dash Iconify library

You could change the color and rotate props of the arrow in a callback depending on the value.

image
image


from dash_iconify import DashIconify
from dash import Dash, html

app = Dash(__name__)

arrow= DashIconify(
    id="arrow",
    icon="el:arrow-up",
    width=30,
    color="green",
    height=30,
    rotate=0,
)

pop_chgrate = 112
stats = (
    html.Span(
        id="pop_chgrate",
        children=[f"{pop_chgrate} %", arrow],
        style={"color": "black", "font-size": "30px", "padding": "15px 5px 0px 10px"},
    )
)


app.layout = html.Div(stats)

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