Как закрасить картинку svg при наведении?

Вы пытаетесь закрасить не картинку а блок .icon-button:

<div class="icon-button"></div>

Вы неправильно используете fill, и вообще не так вставляете svg в html. Вижу что вы еще пытаетесь сделать ссылкой текущую svg элемент. SVG - это не картинка, это документ, который можно встроить с помощью тега img, как сделали вы, но толк svg тогда пропадает. Откройте эту картинку с помощью любого текстового редактора и вы увидите xml документ. Скопируйте его полностью и вставьте в ваш блок .icon-button:

<div class="icon-button">
    <svg>
        <!-- Тут "конфигурация svg" -->
    </svg>
</div>

Теперь вы можете динамически управлять этой картинкой, в этом и состоит различие, чего тег img вам сделать не даст.

Для того чтобы вы смогли сделать эту картинку ссылкой и смогли закрасить, при наведении, можете попробовать сделать вот так:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <a xlink:href="http://example.com/link/" class="svg-link">
        <path d="<!-- Сюда вам нужно перенести атрибут 'd' из вашего svg документа-->" class="svg-item" />
    </a>
</svg>

Все что осталось это задать правильные классы, и прописать свойство fill для path:

/*Можете стилизовать соответствующими свойствами ваш svg документ*/
.svg-item {
    fill: blue;
}
/*При наведении на родительский блок-ссылку, меняем fill у дочернего*/
.svg-link:hover .svg-item {
    fill: red;
}

Так же можете ознакомиться с данной статьей про создание svg-ссылок.

Чтобы иметь возможность перекрашивать SVG-иконки, нужно открыть файл SVG-иконки в текстовом редакторе и вставить содержимое в HTML-документ.

Через файл стилей можно будет обращаться к тегу path со свойством fill, перекрашивая заливку.

Пример

path:hover { 
  fill: #ff0000; 
}

<h1>Наведите на иконку</h1> 
 
<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 492 492"> 
    <path d="M464.344 207.418l.768.168H135.888l103.496-103.724c5.068-5.064 7.848-11.924 7.848-19.124 0-7.2-2.78-14.012-7.848-19.088L223.28 49.538c-5.064-5.064-11.812-7.864-19.008-7.864-7.2 0-13.952 2.78-19.016 7.844L7.844 226.914C2.76 231.998-.02 238.77 0 245.974c-.02 7.244 2.76 14.02 7.844 19.096l177.412 177.412c5.064 5.06 11.812 7.844 19.016 7.844 7.196 0 13.944-2.788 19.008-7.844l16.104-16.112c5.068-5.056 7.848-11.808 7.848-19.008 0-7.196-2.78-13.592-7.848-18.652L134.72 284.406h329.992c14.828 0 27.288-12.78 27.288-27.6v-22.788c0-14.82-12.828-26.6-27.656-26.6z"/></svg>

Для того, чтобы заработало css правило для элемента path необходимо добавить код svg в тело документа.

В Вашем же случае можно попробовать воспользоваться фильтром:

.icon-button:hover img { 
  filter: invert(0.5) sepia(5) saturate(9); 
} 
 
.icon-button img { 
  transition: 500ms; 
}

<div class="icon-button"> 
  <img width=50px src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='check' viewBox='0 0 20 20'%3E%3Cpath d='M10 1c-4.962 0-9 4.038-9 9 0 4.963 4.038 9 9 9 4.963 0 9-4.037 9-9 0-4.962-4.037-9-9-9zm0 16.615c-4.2 0-7.615-3.416-7.615-7.615C2.385 5.8 5.8 2.385 10 2.385c4.2 0 7.615 3.416 7.615 7.615 0 4.2-3.416 7.615-7.615 7.615z' fill='currentColor'%3E%3C/path%3E%3Cpath d='M13.664 6.74l-5.05 5.05-2.278-2.28c-.27-.27-.71-.27-.98 0s-.27.71 0 .98l2.77 2.77c.135.134.312.202.49.202.177 0 .354-.068.49-.203l5.537-5.54c.27-.27.27-.708 0-.98-.27-.27-.708-.27-.98 0z'%3E%3C/path%3E%3C/svg%3E"> 
</div>

более точный диагноз можно было бы поставить если увидеть svg