How to add an SVG icon as select dropdown arrow?

Question

I'm trying since one hour to manage my HTMl selects and to replace the dropdown icon by an SVG but I don't get it running.

This is my code:

select {
    padding: 15px;
    border-radius: 3px !important;
    height: 50px !important;
    color: #ffffff !important;
    padding-right: 30px !important;
    font-size: 14px !important;
    border-color: blue !important;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: blue url("data:image/svg+xml;utf8,<svg height='24' viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='#FFFFFF'/></g></svg>") no-repeat !important;
    background-position-x: 100%;
    background-position-y: 5px;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

What I'm doing wrong here?

Answer 1

You need to adjust the viewbox as the path defined cannot be seen with the actual viewbox. Then remove the extra height definition and also remove the !important to be able to set background-position

select {
  padding: 15px;
  border-radius: 3px;
  height: 50px;
  color: #ffffff;
  padding-right: 30px;
  font-size: 14px;
  border-color: blue;
  position: relative;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: blue url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat;
  background-position: right 5px top 50%;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>