Самый простой и наилучший способ - это просто добавить нужные SVG иконки в кнопки. Можно было бы конечно и бекграундами, но судя по скрину, нужно изменение цвета иконок при hover эффекте, поэтому будет лучше использовать Single Inline SVG или использовать спрайт с иконками.
<button value="product_card_frontpage" class="grid-view">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="......" />
</svg>
</button>
<button value="product_card_full_width" class="list-view">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="......" />
</svg>
</button>
Можно и через бекграунды вставлять и менять цвет иконок, например с помощью css filter, но это на мой взгляд какое-то странное решение. Есть ещё вариант с css масками, но нужно смотреть поддержку этого свойства.
Разумеется есть и другие варианты кроме использования Inline SVG. Например использование дополнительных html тегов для создания "иконок" или реализация с помощью градиентов/теней/псевдоэлементов/etc. Однако нужно понимать, что есть "адекватные" и "правильные" решения задач, а есть "творческие" подходы, которые не всегда и не везде уместны.
И если реализовывать иконки с помощью CSS, то можно обойтись по одному span тегу + два псевдоэлемента на каждую иконку:
Иконки на CSS
<span class="icon-grid"></span>
* {
box-sizing: border-box;
}
.icon-grid {
position: relative;
display: block;
transform: scale(5);
height: 10px;
width: 10px;
}
.icon-grid::after,
.icon-grid::before {
content: "";
display: block;
position: absolute;
width: 10px;
height: 4px;
border-right: 4px solid red;
border-left: 4px solid red;
top: 0;
left: 0;
}
.icon-grid::before {
top: 6px;
}
<span class="icon-list"></span>
* {
box-sizing: border-box;
}
.icon-list {
transform: scale(5);
position: relative;
}
.icon-list,
.icon-list::after,
.icon-list::before {
display: block;
width: 20px;
height: 2px;
border-radius: 3px;
background: #3f51b5;
}
.icon-list::after,
.icon-list::before {
content: "";
position: absolute;
top: -6px;
}
.icon-list::after {
top: 6px;
}
Основной параметр размера иконок зависит от значения
scale(<length>) в свойстве transform. Можно конечно сделать иконки и по другому(возможно даже лучше), но как пример сгодится.
