How can I change Select2 arrow icon?

Question

I'm using select2 for custom select box. But I can't change arrow icon. innerHTML does not work. What can I do against it?

$(".position-select").select2({
  dropdownParent: $(".choose-position")
});

// $('b[role="presentation"]').remove();

// this not working!
$('.choose-position select2-arrow').append(
  '<svg style="fill:red" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg>'
);

* {
  font-family: "Segoe UI", Roboto, sans-serif;
}

.choose-position .select2-container {
  width: 100% !important;
}

.choose-position .select2-container--default .select2-selection--single {
  width: 100% !important;
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  font-size: 16px;
  background-color: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: 25px;
  transition: 0.1s;
}

.choose-position .select2-search {
  display: none;
}

.choose-position .select2-results__option {
  display: flex;
  align-items: center;
}

.choose-position .select2-results__option .img-flag {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.choose-position .select2-container--default.select2-container--focus .select2-selection--single {
  border: 1px solid #c9c9c9 !important;
  outline: 0;
}

.choose-position span.select2-selection.select2-selection--single {
  outline: none;
}

.choose-position .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 35px;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 35px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(35, 49, 45, 0.14);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css">

<div class="select-box choose-position">
  <select class="position-select">
    <option value="english">English Teacher</option>
    <option value="german">Deutschlehrer</option>
    <option value="french">Professeur de Français</option>
    <option value="chinese">中文老師</option>
  </select>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

Answer 1

Continuing off of Shadow, there is a way to persist the arrow behaviour as in the original post. You can do this without javascript actually, which is much better.

The reason you'd need to not use javascript here is because on bigger projects you might need multiple select2 boxes and with javascript you're going to have to add the listener onto every select2 box you have in your project. Here is a way to do it with ONLY css. Even above in Shadows answer, you have to specify each select2 element to have the dropdown parent.

The way I did it was to hijack the css classes added to the select2 dropdown and trigger some css when a class chain is matched. Like this:

select2-container--open .select2-selection__arrow {
    transform: rotate(180deg) !important;
}

So when the dropdown opens, select2-container--open is attached to the dropdown, the select2-selection__arrow will receive the transform css.

Here is an idea fiddle of the situation.

Answer 2

Override b tag and use your own backgroun-image url

$(".position-select").select2({
  dropdownParent: $(".choose-position")
});

* {
  font-family: "Segoe UI", Roboto, sans-serif;
}

.choose-position .select2-container {
  width: 100% !important;
}

.choose-position .select2-container--default .select2-selection--single {
  width: 100% !important;
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  font-size: 16px;
  background-color: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: 25px;
  transition: 0.1s;
}

.choose-position .select2-search {
  display: none;
}

.choose-position .select2-results__option {
  display: flex;
  align-items: center;
}

.choose-position .select2-results__option .img-flag {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.choose-position .select2-container--default.select2-container--focus .select2-selection--single {
  border: 1px solid #c9c9c9 !important;
  outline: 0;
}

.choose-position span.select2-selection.select2-selection--single {
  outline: none;
}

.choose-position .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 35px;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 35px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(35, 49, 45, 0.14);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  background-image: url(https://cdn4.iconfinder.com/data/icons/user-interface-174/32/UIF-76-512.png);
  background-color: transparent;
  background-size: contain;
  border: none !important;
  height: 20px !important;
  width: 20px !important;
  margin: auto !important;
  top: auto !important;
  left: auto !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css">

<div class="select-box choose-position">
  <select class="position-select">
    <option value="english">English Teacher</option>
    <option value="german">Deutschlehrer</option>
    <option value="french">Professeur de Français</option>
    <option value="chinese">中文老師</option>
  </select>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>