How to change embedded image in button on hover?

Question

I have a HTML button that is setup like this:

How do I set the image color to red on hover to prevent it from disappearing?

https://jsfiddle.net/s7dLwp0r/

.btn {
  background-color: red;
  background-color: red;
  height: 39px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 5px;
  border: 1px solid red;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 100%;
}

.btn:hover {
  background-color: white;
  border: 1px solid red;
  color: red;
  text-transform: uppercase;
}

<button class="btn">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS4xMDciIGhlaWdodD0iMjQuOTc3IiB2aWV3Qm94PSIwIDAgMTkuMTA3IDI0Ljk3NyI+PGRlZnM+PHN0eWxlPi5hLC5ie2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MS41cHg7fS5he3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjc1IDAuNzUpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjEyOSAxMS42MDgpIj48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8+PGxpbmUgY2xhc3M9ImEiIHgyPSI5LjM0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzLjQ0NSkiLz48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuODkxKSIvPjwvZz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MTUuMjM0LDEwOTMuMDE5SDU2MDMuNzlsLTQuNTM3LDMuOTM3djE3LjkxNGExLjYzLDEuNjMsMCwwLDAsMS42MjUsMS42MjVoMTQuMzU2YTEuNjMxLDEuNjMxLDAsMCwwLDEuNjI2LTEuNjI1di0yMC4yMjZBMS42MywxLjYzLDAsMCwwLDU2MTUuMjM0LDEwOTMuMDE5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU1OTkuMjUzIC0xMDkzLjAxOSkiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MDkuNTY5LDEwOTMuNzkydjVoLTMuMDUzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTYwMy41NjUgLTEwOTMuNDc4KSIvPjwvZz48L3N2Zz4="  alt="order"/>
&nbsp;order
</button>

Answer 1

I changed img color to black and used Den's approach.

.btn {
  font: normal normal bold 13px/16px Montserrat, sans-serif;
  background-color: #C40000;
  height: 39px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 5px;
  border: 1px solid #C40000;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 100%;
}

.btn:hover {
  background-color: #FFF;
  border: 1px solid #C40000;
  color: #C40000;
  text-transform: uppercase;
}

.btn > img {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(123deg) brightness(104%) contrast(102%);
  transition: 0.2s;
}

.btn:hover > img {
  filter: invert(17%) sepia(98%) saturate(2966%) hue-rotate(352deg) brightness(78%) contrast(127%);
}

<button class="btn">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAZCAYAAADTyxWqAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpaW0ONhBikOG6mRBVMRRqlgEC6Wt0KqDyaVf0MSQpLg4Cq4FBz8Wqw4uzro6uAqC4AeIm5uToouU+L+k0CLGg+N+vLv3uHsHCK06U82+cUDVLCObSoqF4ooYeEUIMUQQhE9ipp7OLeThOb7u4ePrXYJneZ/7c0SUkskAn0g8y3TDIl4nnt60dM77xFFWlRTic+Ixgy5I/Mh12eU3zhWHBZ4ZNfLZOeIosVjpYbmHWdVQiaeI44qqUb5QcFnhvMVZrTdY5578heGStpzjOs1hpLCINDIQIaOBGuqwkKBVI8VElvaTHv6Y48+QSyZXDYwc89iACsnxg//B727N8uSEmxROAv0vtv0xAgR2gXbTtr+Pbbt9AvifgSut699oATOfpDe7WvwIGNgGLq67mrwHXO4AQ0+6ZEiO5KcplMvA+xl9UxEYvAVCq25vnX2cPgB56mrpBjg4BEYrlL3m8e5gb2//nun09wMeOXKFRbv7gAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+UKGwYiNbJ5Fh8AAAEWSURBVDjLzdW/K8VRGMfx1/f2vTejMrAoxa5IwmBRTAbKJIPdtclm8CfIZL8Gg0HqpphufhRiUBZ2k8niW1jOcJU65/4YfOosT+d593yec55zMr+VYQdV6SpwjY2sKVjBAdZQxzQe8ByBZVgKe0EvLvCFbfTgG1uJ1e3iM8cQTjGMVdQCTItWyzmuUMYcGjpQjoHQ9AbGsYlSu7Bm9YXGwwveO4GdYaRdmyVd1P+F5X/EJjGakPuImxhsP1yRmG4xEYPNoj8B9pZi8wOv3erZCWYSchtYjMFqeEo8gGhlh2F1xeYKxhJy73AUg61jPgFWT4Et/JvZLMJL24kqKDKch1k8Dh9Kq8qwjPsMg9jDVJsVFrhE9QfANDDRKbrGPAAAAABJRU5ErkJggg==" />
&nbsp;order
</button>

Answer 2

Use invert filter on the hover of the button against the image.

JS Fiddle

for future changes, you can enter the color you want on this website and then use that as the filter

.btn {
  background-color: #C40000;
  background-color: #C40000;
  height: 39px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 5px;
  border: 1px solid #C40000;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 100%;
}

.btn:hover {
  background-color: white;
  border: 1px solid red;
  color: red;
  text-transform: uppercase;
}

.btn:hover>img {
  filter: invert(44%) sepia(100%) saturate(1313%) hue-rotate(312deg) brightness(93%) contrast(101%);
}

<button class="btn">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS4xMDciIGhlaWdodD0iMjQuOTc3IiB2aWV3Qm94PSIwIDAgMTkuMTA3IDI0Ljk3NyI+PGRlZnM+PHN0eWxlPi5hLC5ie2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MS41cHg7fS5he3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjc1IDAuNzUpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjEyOSAxMS42MDgpIj48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8+PGxpbmUgY2xhc3M9ImEiIHgyPSI5LjM0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzLjQ0NSkiLz48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuODkxKSIvPjwvZz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MTUuMjM0LDEwOTMuMDE5SDU2MDMuNzlsLTQuNTM3LDMuOTM3djE3LjkxNGExLjYzLDEuNjMsMCwwLDAsMS42MjUsMS42MjVoMTQuMzU2YTEuNjMxLDEuNjMxLDAsMCwwLDEuNjI2LTEuNjI1di0yMC4yMjZBMS42MywxLjYzLDAsMCwwLDU2MTUuMjM0LDEwOTMuMDE5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU1OTkuMjUzIC0xMDkzLjAxOSkiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MDkuNTY5LDEwOTMuNzkydjVoLTMuMDUzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTYwMy41NjUgLTEwOTMuNDc4KSIvPjwvZz48L3N2Zz4="  alt="order"/>
&nbsp;order
</button>

Answer 3

Alternatively, you could use an SVG as your image source and then define the fill colour as follows:

.btn:hover svg {
   fill: green;
}