Adding Icons to Dropdown Menu Label

Dash Python
1

In a Navbar, I want to add a Dropdown Menu with an User Icon. Any suggestion?

Something like this:
image

2 Likes
2

any update on this? I also want to do something like this

3

I wanna know, if it is possible :smiley:

1 Like
4

I also want to know but there is noone to tell

1 Like
5

were you able to figure out how to do this?

6

Hi all @mbailey , @bilallozdemir , @ashima , @jonatelo

You can do it using Emojis like this:

image
image1219×243 6.68 KB

Here is the code that use the example of dash boostrap for navbar:

import dash_core_components as dcc
import dash_html_components as html
import dash
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

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

# -*- coding: utf-8 -*-

app.layout = html.Div([
    dbc.NavbarSimple(
        children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="#")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("More pages", header=True),
                dbc.DropdownMenuItem("☎️"+" Telephone", href="#"),
                dbc.DropdownMenuItem("📱"+" Mobile", href="#"),
                dbc.DropdownMenuItem("📠"+" Fax", href="#"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="NavbarSimple",
    brand_href="#",
    color="primary",
    dark=True,
)
      ]
)



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

You can select any amoji from this site:
https://emojipedia.org/

Also be sure to add this line for convert emojis code, it is not a reference:

# -*- coding: utf-8 -*-

See more about using emojis in the docs:
https://dash.plotly.com/datatable/conditional-formatting

4 Likes