How to replace Bootstrap dropdown-toggle icon with another default icon?

As described in this other SO thread, you can either just remove the current icon and use a <span> or <i> tag to add your own custom/Font Awesome icon like this:

.dropdown-toggle::after {
        display: none !important;
 }
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle"  data-toggle="dropdown" style="background-color: #7c2a8b;">
    Customer
    <i class="fa fa-angle-down"></i>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">A</a>
    <a class="dropdown-item" href="#">B</a>
    <a class="dropdown-item" href="#">C</a>
  </div>
</div>

Or you can skip the css part and just remove the dropdown-toggle class name and add the icon to your html like this:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="dropdown">
  <button type="button" class="btn btn-secondary" data-toggle="dropdown" style="background-color: #7c2a8b;">
    Customer
    <i class="fa fa-angle-down"></i>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">A</a>
    <a class="dropdown-item" href="#">B</a>
    <a class="dropdown-item" href="#">C</a>
  </div>
</div>


You might change the default values to the following:

.dropdown-toggle {
  font: 400 1.5rem/1.25 sans-serif;
  color: white;
  background: purple;
  padding: .5em 1em;
}

.dropdown-toggle::after {
  display: inline-block;
  width: .3em;
  height: .3em;
  margin: -.3em 0 0 .4em;
  vertical-align: middle;
  content: "";
  border: .3em solid;
  border-width: 0 .15em .15em 0;
  transform: rotateZ(45deg)
}
<span class="dropdown-toggle">CUSTOMERS</span>