Adding Icons inside buttons or inside Navbars

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

btn_icons

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:

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

btn

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

Mazen Mohamed

5 Likes

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.

4 Likes

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

1 Like

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

2 Likes

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.

2 Likes

@raptorbrad thank you for the tip i didnt know it

1 Like

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