Как использовать SVG из файла с несколькими SVG с помощью селектора идентификатора с помощью ::before ⇐ CSS

[Anonymous]

Основная проблема:
Я использую стороннюю библиотеку, в которой я могу установить в качестве метки только текст (без HTML или JS), но хочу добавить значок перед текстом. Значок является частью файла svg, который содержит несколько значков, доступ к которым осуществляется по идентификатору, обычно через преобразователь набора значков.
Сам проект выполнен в vue 3 с использованием vite, на всякий случай. это простое решение именно для этого.
Мой подход на данный момент:
Я пробовал использовать ::before и различные комбинации URL, фонового изображения и связанных атрибутов. Однако селектор не работает, и я получаю только комбинацию всех отображаемых значков.
Теперь мой вопрос: возможно ли вообще с помощью атрибута URL-адреса CSS использовать селектор идентификатора, чтобы получить только один из SVG в файле? Я просто делаю это неправильно? Мой svg-файл неправильный?
Мой код разделен на соответствующие части:
https://plnkr.co/edit/jMU0VICbE1ypfKlr?open=index.html
index.html:




Add an icon via ::before










Label 1








lib/icons.svg:
















lib/lib.css:
.scell {
overflow: hidden;
text-align: center;
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 255, 0.5);
border-right: 1px solid rgba(0, 0, 255, 0.5);
}

.lib_data .lib_wrapper div {
box-sizing: border-box;
}

.scell .scell_level0 {
padding-left: 5px;
padding-top: 16px;
color: grey;
}

.scell.folder .scell_expand {
float: left;
width: auto;
}

.scell.folder .scell_name {
float: left;
width: 237px;
color: grey;
font-size: 14px;
font: normal normal 600 14px/18px "Open Sans", sans-serif;;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}

.scell.folder .scell_expand {
margin: -4px 4px
}

.scell.folder {
border-right: 1px solid transparent;
}

.row_folder .scell {
border-right-color: grey;
border-bottom-color: grey;
}

lib/style.css
.container {
height: 100vh;
width: 100vw;
}

.lib_container, .lib_data {
width: 100%;
height: 100%;
}

.scell {
display: flex;
flex-direction: row;
}

.scell::before {
height: 24px;
margin: 0 auto;
max-height: 24px;
max-width: 24px;
min-height: 24px;
min-width: 24px;
padding-top: 12px;
width: 24px;
}

.opened::before {
content: url('icons.svg#chevron-down');
}

.closed::before {
content: url('icons.svg#chevron-right');
}

.invalid::before {
content: url('icons.svg#invalid');
}

.scell:not(.invalid):not(.opened):not(.closed)::before {
content: "";
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... ith-before