Edit History

Hello @artistik

You can approach the problem in several different ways, below are two of the simplest.

1. Add SVG icon (replace <i> tag with icon):

<svg class="custom-shopping-cart" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="#2a353d" stroke-width="1.5"><g stroke-linecap="round"><path d="m8 16h7.2632c4.4876 0 5.1701-2.8192 5.9978-6.93092.2388-1.18597.3582-1.77895.0711-2.17401-.2871-.39507-.8374-.39507-1.938-.39507h-13.3941"/><path d="m8 16-2.62127-12.48507c-.22258-.89034-1.02255-1.51493-1.94028-1.51493h-.93845"/><path d="m8.88 16h-.41143c-1.36335 0-2.46857 1.1513-2.46857 2.5714 0 .2367.1842.4286.41143.4286h11.08857" stroke-linejoin="round"/></g><circle cx="10.5" cy="20.5" r="1.5"/><circle cx="17.5" cy="20.5" r="1.5"/></g></svg>

2. Link image / SVG using CSS (change class in <i> tag):

Simple class with image:

.icon-shopping-cart {
  display: block;
  height: 32px;
  width: 32px;
  background-size: cover;
  background-clip: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://static-00.iconduck.com/assets.00/shopping-cart-icon-490x512-t9ecz6iv.png);
}

or SVG mask to easy change color by background color:
(example for theme.css in classic theme and folder with icons in /public_html/themes/classic/assets/icons)

.icon-shopping-cart {
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  height: 32px;
  width: 32px;
  background-color: #000000;

  -webkit-mask-image: url(../icons/shopping-cart.svg);
  mask-image: url(../icons/shopping-cart.svg);
}

and of course add <i> tag with class name

<i class="icon-shopping-cart"></i>

In example, I use icon from: Hugeicons Essential Free Icons You can find it here on Icon Duck