Changing Dropdown Icon on Bootstrap 4

Question

On Bootstrap 3 this was pretty easy, you just had to change span and add whatever icon you wanted instead. But that doesn\'t seem the case with Bootstrap 4. Or maybe I\'m missin

Answer 1

Using the suggestions in the other answers, I added rules in my app's main CSS file for the the dropdown-toggle.

The key is that Bootstrap adds the "collapsed" class to items with "dropdown-toggle" when the content is hidden and removes the class when the content is displayed.

/* Align Bootstrap default Dropdown icon closer to vertical center of collapsed icon. */
.dropdown-toggle::after {
    vertical-align: 0.15em;
}

/* Make Dropdown icon point right when collapsed, with Browser default vertical alignment. */
.collapsed.dropdown-toggle::after {
    border-top: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-bottom: 0.3em solid transparent;
    border-right: 0;
    vertical-align: unset;
}