pythoncssbootstrap-4font-awesomeplotly-dash

Icon inside dash dbc.Button not displaying

I am writing a dash form to obtain the password from a user. I want to have an icon that allows the user to view their input in plain text rather than hidden. To do this I have created an InputGroup with an input and a button. The button should be clickable and should display an icon to toggle the password as visible or not. The button itself works as expected, however, there is no icon displayed. Below is my code

import dash
import dash_bootstrap_components as dbc
from dash import Output, Input, State, html

from dash.exceptions import PreventUpdate


app = dash.Dash( external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME],)

app.layout = dbc.Container(
    dbc.Form(
                                            [
                                                dbc.Label("Password"),
                                                dbc.InputGroup(
                                                    [
                                                        dbc.Input(
                                                            id="signup-password",
                                                            type="password",
                                                            placeholder="",
                                                            required=True,
                                                        ),
                                                        dbc.Button(
                                                            html.I(className="bi bi-eye-fill"),
                                                            id="password-toggle",
                                                            n_clicks=0,
                                                            outline=True,
                                                            color="secondary",
                                                            style={
                                                                "cursor": "pointer",
                                                                "display": "inline-block",
                                                            },
                                                        ),
                                                    ],
                                                    className="mb-3",
                                                ),
                                            ],
                                            className="mb-3",
                                        ),
    className="p-5",
)


# Callback to toggle password visibility
@app.callback(
    Output("signup-password", "type"),
    Output("password-toggle", "children"),
    [Input("password-toggle", "n_clicks")],
    [State("signup-password", "type")],
)
def toggle_password_visibility(n_clicks, current_type):
    if n_clicks is None:
        raise PreventUpdate
    return (
        ("password", html.I(className="bi bi-eye-fill"))
        if current_type == "text"
        else ("text", html.I(className="bi bi-eye-slash-fill"))
    )



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

and a picture of the icon I am trying to show can be found here. Where am I going wrong?

Solution

  • Dash Bootstrap Components includes two sets of icons :

    You just need to include dbc.icons.BOOTSTRAP in the external_stylesheets list.