Добавил скаченную иконку на сервер и загрузил её в HTML с помощью <img>
<button>
<img src="https://svg-art.ru/files/arrow-decision-auto.svg">
</button>
Значит у вас проблемы с путём до файла *.svg
Но в случае добавления иконки с помощью <img>
она ведёт себя как обыкновенное изображение, поэтому затруднительно сделать стилизацию обычными приемами с помощью CSS.
Пока нет достаточного опыта работы с SVG, используйте инлайновый способ добавления иконки.
Удалил из кода иконки fill="#626262"
чтобы не мешало стилизации иконки
.btn {
fill:dodgerblue;
transition:fill 0.5s ease;
}
.btn:hover {
fill:crimson;
}
<button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="2em" height="2em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M12 5H9l4-4 4 4h-3v4.43a8.638 8.638 0 0 0-2 1.69V5zm-1.6 10H8.5l-.7-2H4.6l-.7 2H2l3.2-9h2l3.2 9zm-3.05-3.35L6.2 8l-1.15 3.65h2.3zM23 11l-4-4v3a6.75 6.75 0 0 0-7 6.17 3 3 0 1 0 2 0c.47-4 4.47-4.2 4.95-4.2v3L23 11z" /></svg>
</button>
Ещё способ добавить svg иконки
Данная техника подойдет, если нужно быстро добавить иконки в свой проект, которые можно раскрасить в любой цвет из внешнего файла CSS
.
Причём иконки высокого качества, практически полный набор на все случаи.
Иконки адаптивны и не теряют качества при масштабировании, так как это иконки SVG из которых состоит символьный шрифт - Google Material Icons
Подключение шрифта:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Выбирать иконки по названиям можно здесь
Выбираем нужную иконку с именем - favorite
Подключение иконки к HTML странице:
<i class="material-icons red">favorite</i>
, где
material-icons
- общий класс для всех иконок
red
- дополнительный класс, задающий цвет окраски иконки
Ниже пример с тремя одинаковыми иконками, которые раскрашены в разные цвета
Добавлена анимация увеличения иконок при hover
.
.material-icons {
transform: scale(2);
}
i {
margin: 100px 50px 50px 80px;
transition: transform 0.5s ease-in-out;
}
i:hover {
transform: scale(4);
}
.red{color:red}
.green{color:yellowgreen}
.blue{color: dodgerblue}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons red">favorite</i>
<i class="material-icons green">android</i>
<i class="material-icons blue">backup</i>
Размер иконок также можно менять, здесь удвоенный исходный размер:
.material-icons {
transform: scale(2);
}
GET путь_к_иконке/arrow-decision-auto.svg 404 (Not Found)
?html
-файл и папкаimages
находятся на одном уровне вложенности (лежат непосредственно в одной папке), то вsrc
следует писатьimages/адрес_иконки
, а не../images/адрес_иконки
. Конструкция../
означает подъём на один уровень вверх по каталогу.