Using an icon (html.I) in a dbc.Alert results in a multiple values for argument 'id'

Dash Python
#1

Probably a noob mistake but I am trying to set an Icon in front of my warning message and am following the example here Icons - dbc docs . The only difference is that I have an id defined and it is not in the examples.

dbc.Alert(
            [html.I(className="bi bi-check-circle-fill me-2")],
              'User data updated',
              id='user_update_alert',
              is_open=False,
              dismissable=True,
              fade=True,
              color="success",
              duration=2000
              ),

I end up getting an error

Traceback (most recent call last):
  File "...tw_mod\visualize\tw_user_navbar.py", line 114, in <module>
    dbc.Alert(
  File "D:\ProgramData\Anaconda3\lib\site-packages\dash\development\base_component.py", line 425, in wrapper
    return func(*args, **kwargs)
TypeError: __init__() got multiple values for argument 'id'

Is there something I am not understanding about the html.I component? The code runs fine without it.

#2

Hi @vnavdulov

Try moving the warning message so it’s included in the children prop of the dbc.Alert:

dbc.Alert(
    [html.I(className="bi bi-check-circle-fill me-2"), "User data updated"],
    id="user_update_alert",
    is_open=True,
    dismissable=True,
    fade=True,
    color="success",
    duration=2000,
)
#3

Thank you! The error code did go away but the icon is not showing :man_shrugging:

image
image959×136 3.48 KB

#4

Hey @vnavdulov,

Making progress! Check to make sure you have the icon stylesheet included. One way to do this is:

app = Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
)
1 Like
#5

Yes, thank you! That did the trick! I was missing the dbc.icons in external stylesheets. Thank you so much!
image

1 Like