SVG

Использование svg спрайтов:

1. Создаём скрытый svg контейнер в футере или хедере (для того чтобы управлять цветом у symbol и всего что внутри не должен быть указан fill)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<symbol viewBox="0 0 10.41 46" id="arrow-down" xmlns="http://www.w3.org/2000/svg">
		<path
				d="M10.12 41.5l-4.21 4.21a1 1 0 01-1.41 0L.29 41.5a1 1 0 010-1.41 1 1 0 011.42 0l2.5 2.5V0h2v42.59l2.5-2.5a1 1 0 011.41 1.41z"/>
	</symbol>
</svg>

2. Создаём отдельный файл со спрайтами и обращаемся к нему из use

<svg width="25" height="10" class="show-link-arrow__icon">
	<use xlink:href="img/sprites.svg#show-link-arrow"></use>
</svg>

Изменить цвет use

path { fill: currentcolor; }

Пример:

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

ссылка