Changing Dropdown Icon on Bootstrap 4

I've done something similar to the accepted answer, changing the default caret to a vertical ellipsis from font-awesome like this:

.dropdown-toggle-ellipsis::after {
  display: none;
}

.dropdown-toggle-ellipsis::before {
  display: inline-block;
  padding: 0.5rem;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f142";
}

Just apply dropdown-toggle-ellipsis as an additional class to your toggle button.

The main difference with this solution is that the actual icon (\f142 here) is now defined in your stylesheets, not in your markup. Whether that's a plus depends on your situation of course.

The default caret isn't an icon, rather a border with these properties:

border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;

Thus if you set .dropdown-toggle::after to have border:none!important, you can the use content to set the icon you want.

The code I use is this:

.dropdown-toggle::after {
  border: none!important;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f107"!important; /* the desired FontAwesome icon */
  vertical-align: 0; /* to center vertically */
}

With this method you can also change the FontAwesome icon when the dropdown is visible, thanks to the .show class it adds:

li.menu-item.show a.dropdown-toggle.::after {
  content: "\f106"!important /* the different icon */
}

You have to hide the caret icon like this..

.dropdown-toggle::after {
    display: none;
}

Then add the fontawesome icon..

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-heart"></i>
</button>

http://codeply.com/go/xd2b75iUbM

OR, just remove the dropdown-toggle class from the button as it's only purpose seems to be showing the caret icon.