title: How can I change Select2 arrow icon?
body: <p>I'm using <a href="https://select2.org/" rel="nofollow noreferrer">select2</a> for custom select box. But I can't change arrow icon. <code>innerHTML</code> does not work. What can I do against it? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".position-select").select2({
    dropdownParent: $(".choose-position")
  });
  
  // $('b[role="presentation"]').remove();
  
  // this not working!
  $('.choose-position select2-arrow').append(
    '&lt;svg style="fill:red" width="36" height="36" viewBox="0 0 36 36"&gt;&lt;path d="M2 26h32L18 10 2 26z"&gt;&lt;/path&gt;&lt;/svg&gt;'
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css"&gt;
  
  &lt;div class="select-box choose-position"&gt;
    &lt;select class="position-select"&gt;
      &lt;option value="english"&gt;English Teacher&lt;/option&gt;
      &lt;option value="german"&gt;Deutschlehrer&lt;/option&gt;
      &lt;option value="french"&gt;Professeur de Français&lt;/option&gt;
      &lt;option value="chinese"&gt;中文老師&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>