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:
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)
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.
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_bootstrap_components as dbc
# For Bootstrap Icons...
app = dash.Dash(
# Or for Font Awesome Icons...
app = dash.Dash(
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.