Dash bootstrap component: how to change the Navbar toggler default icon?

Dash Python
1

Hello,

I read here https://getbootstrap.com/docs/3.3/components/#glyphicons-glyphs that with bootstrap it is possible to change the default icon used in the navbar, which is the “glyphicon glyphicon-menu-hamburger”

Question is, how to do it when using the dash bootstrap component? Must be quite simple I guess, but I do not exatly understand how to do it. Not that much doc. Or I didnt find it, unfortunately :confused:

Inspecting the .scss code I find
.navbar-toggler-icon {
background-image: $navbar-dark-toggler-icon-bg;
}
but no clue what I can infer from that

2

dash-bootstrap-components uses Bootstrap 4 which dropped support for the glyphicons that were in Bootstrap 3. The default icon is defined in the CSS here, you could try overriding that.

Alternatively you should be able to create your own toggle using a Button component and then adding the navbar-toggler classes to style it + a FontAwesome icon of your choice.

3

Yes, I already figured out that the default icone is defined with

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

Problem is, I dont know what kind of URL is that. What is “data:image”?

I’m opting for the second solution, that is creat a toggle with a Button +navbar-toggler class +another icon

Will update this post once I have something decent

Actually, if the below post had a correct title, I would have found it earlier:

Thanks @tcbegley