Как загрузить картинку SVG из CSS

Question

В настоящее время у меня есть сайт html, где я вставляю изображения SVG через теги и код самого файла svg.Это работает, но код не совсем красивый.Вместо этого я хотел бы загрузить такое изображение в мой файл CSS, где у меня есть класс для этого типа, если значки называются 'icon-no-background'.Этот класс стилизует каждую иконку одинаково.Ниже этого класса я хотел бы добавить подкласс, который будет загружать значок каждого продукта.

Код моего класса:

.icon-no-background {
      position: absolute;
      top: 0;
      left: 0;
      color: #aaabb6;
      width: 1.28rem;
      height: 1.28rem;

      .icon-product1 {
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22.7px" height="17.6px" viewBox="0 0 22.7 17.6" style="enable-background:new 0 0 22.7 17.6;" xml:space="preserve">
          <path stroke="currentColor" stroke-width="0.4" class="st0" d="some svg code here"></path>
        </svg>
      }
    }

Тогда я просто вызову этот класс из моего HTML, и он должен отобразить правильную картинку.Это не работает однако.Что я делаю не так?Я пытался использовать даже атрибут 'url' для загрузки файла SVG, но безуспешно.

Есть идеи?

Спасибо, Дэвид