Bootstrap using caret icon by default for their navbar drop down menu , we can change the dropdown menu icon in our favorite icons , also can set the different icon with show and hide dropdown menu effect using CSS code ,
Just add the given code below in CSS to see the effect,
.dropdown-toggle[data-toggle="dropdown"]:after {
font-family: 'Material Icons outlined';
font-weight: 900;
content:"\e065";
}
.dropdown-toggle[data-toggle="dropdown"] {
display: flex;
}
.dropdown-toggle[data-toggle="dropdown"]:after {
border: none;
}
Suggested for mobile Version on click
function
.show > .dropdown-toggle[data-toggle="dropdown"]:after {
content:"\e03b";
}
May use for Desktop Version if need on hover
function
:hover > .dropdown-toggle[data-toggle="dropdown"]:after {
content:"\e03b";
To get the above result , don't forget to add the Google material icon CDN to get the desired icons. Also may use fontawasome icon but process is same to add the CDN link of desired icon and use Unicode as per the above example..
