在伪元素之前在CSS中使用羽毛图标

如何解决在伪元素之前在CSS中使用羽毛图标

我在项目中使用了羽毛图标，我需要在伪元素之前使用羽毛图标精灵的符号。我试图在CSS中将图标用作background-image。我在线阅读了使用url("path/to/file.svg#viewname")可以访问SVG文件中的Views标签的信息。除了访问SVG文件中的符号外，是否可以使用类似的方式？

我尝试过的事情：

p::before {
    content: "";
    background-image: url("feather-sprite.svg#search");
    display: block;
    height: 100px;
    width: 100px;
}

羽毛图标精灵的示例：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="activity" viewBox="0 0 24 24">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
        </symbol>
        <symbol id="airplay" viewBox="0 0 24 24">
            <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path>
            <polygon points="12 15 17 21 7 21 12 15"></polygon>
        </symbol>
        <symbol id="alert-circle" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </symbol>
        <symbol id="alert-octagon" viewBox="0 0 24 24">
            <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </symbol>
        <symbol id="alert-triangle" viewBox="0 0 24 24">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
            <line x1="12" y1="9" x2="12" y2="13"></line>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </symbol>
        <symbol id="align-center" viewBox="0 0 24 24">
            <line x1="18" y1="10" x2="6" y2="10"></line>
            <line x1="21" y1="6" x2="3" y2="6"></line>
            <line x1="21" y1="14" x2="3" y2="14"></line>
            <line x1="18" y1="18" x2="6" y2="18"></line>
        </symbol>
        ...
    </defs>
</svg>