Adding Icons inside buttons or inside Navbars

[Mazen72]

Hey Plotly Community,

in this post i will illustrate how to put icons inside dcc.Button or dbc.Button beside the button text to look something like the image bellow

of course this apply to navigation bars ( dbc.Nav ) and many other components, so first thing is you will add the icons css files to your app, in my case im using Font Awesome 5 icons so you can add it to your app object in external_stylesheets parameter as shown in image bellow

then you will start search fir the ClassName of the icon you want and i recommend you to use this site:

Icons from Font Awesome, Bootstrap and Google

so if you entered the word ( plus ) in the search you will find the related icons with its ClassName where i will tell you how to use it shortly, note that you should choose icons related to Font Awesome library that we are using in this example

so lets say we will choose the icon with ClassName=‘fas fa-plus’ ( as shown in image above )

in your code you as shown in image bellow you will create html.I() component which is used with icons and will set its ClassName to ‘fas fa-plus’ and also will create html.Div() component that holds the button text and lastly will put them together in an html.Span() component ( the display style is set to ‘inline-block’ so that the button and icon appear next to each other)

after that you will create a button component in my case its a dbc.Button() and make its children equal to the html.Span() component created in the previous image

then it should look like this

i hope this post was helpful, and remember small details always make a difference in your app, thanks

Mazen Mohamed

[snehilvj]

Thanks @Mazen72 for sharing this. I’m sure people will find it helpful.
I’d also suggest giving Dash Iconify a try as it unlocks yet more potential for using icons in dash apps. This documentation shows it’s usage with dmc but you can use it with dash components as well dbc.

[Mazen72]

Thanks @snehilvj for letting me know, i will check it out

[raptorbrad]

If you are already using Dash Bootstrap components, they include a link to both Font Awesome and Bootstrap icons. This way users don’t have to keep track of where the proper CSS file is located on the web. Behind the scenes Dash Bootstrap just links to CSS file. For information about icons with dbc can be found in the documentation, here.

import dash
import dash_bootstrap_components as dbc

# For Bootstrap Icons...
app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
)
# Or for Font Awesome Icons...
app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
)

[adamschroeder]

Thank you @Mazen72 for writing up this tutorial, especially the part on the html.Span() and html.I(). It is not very well known and I remember struggling with this as well when I started working with fontawesome icons.

@raptorbrad, thanks for sharing that tip. Yes, using dbc directly to connect to the fontawesome css makes it easier.

[Mazen72]

@raptorbrad thank you for the tip i didnt know it

[Mazen72]

You are welcome @adamschroeder and yes that wasnt well known to me neither until i needed it so i found out how add icons in dash components

[hassan]

This will be great if it worked with dash_bootstrap_components!

[snehilvj]

It does.

[DwilliamsTM]

How would you do this is you wanted to use an svg in the assets folder? I need to be able to get the icon without internet connection

[snehilvj]

Dash Iconify doesn’t work for local assets as of now.