Значок внутри тире dbc. Кнопка не отображается

Я пишу тире, чтобы получить пароль от пользователя. Я хочу иметь значок, который позволит пользователю просматривать введенные данные в виде обычного текста, а не скрытого. Для этого я создал группу ввода с полем ввода и кнопкой. Кнопка должна быть кликабельной, и на ней должен отображаться значок, позволяющий переключать видимость или скрытие пароля. Сама кнопка работает как положено, однако значок не отображается. Ниже мой код

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()

а изображение значка, который я пытаюсь показать, можно найти здесь. Где я ошибаюсь?

Почему в Python есть оператор "pass"?
Почему в Python есть оператор "pass"?
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Некоторые методы, о которых вы не знали, что они существуют в Python
Некоторые методы, о которых вы не знали, что они существуют в Python
Python - самый известный и самый простой в изучении язык в наши дни. Имея широкий спектр применения в области машинного обучения, Data Science,...
Основы Python Часть I
Основы Python Часть I
Вы когда-нибудь задумывались, почему в программах на Python вы видите приведенный ниже код?
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
Алиса и Боб имеют неориентированный граф из n узлов и трех типов ребер:
Оптимизация кода с помощью тернарного оператора Python
Оптимизация кода с помощью тернарного оператора Python
И последнее, что мы хотели бы показать вам, прежде чем двигаться дальше, это
Советы по эффективной веб-разработке с помощью Python
Советы по эффективной веб-разработке с помощью Python
Как веб-разработчик, Python может стать мощным инструментом для создания эффективных и масштабируемых веб-приложений.
0
0
73
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Компоненты Dash Bootstrap включают в себя два набора значков:

  • dbc.icons.FONT_AWESOME (классы значков с префиксом 'fa')

  • dbc.icons.BOOTSTRAP (классы значков с префиксом 'bi')

Вам просто нужно включить dbc.icons.BOOTSTRAP в список external_stylesheets.

Другие вопросы по теме