Would this work as an icon def system?

[mtsweir]

I'm considering using these icons as a system for a current project. Here's an example:

Defs

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <symbol id="icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
        <circle cx="14" cy="14" r="12" />
        <path d="M23 23 L30 30"  />
    </symbol>
</svg>

Use

<svg class="pf-icon">
    <use xlink:href="#icon-search"></use>
</svg>

CSS This works fine, but I can't control the weight or stroke attributes:

.pf-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    color: inherit;
    overflow: visible;
    stroke-width: 2px; // no effect
    stroke-linecap: miter; // no effect
    stroke-linejoin: butt; // no effect
}

[danklammer]

Hi @mtsweir, when using symbol you can't access the icon's CSS properties since they aren't in the DOM, but in Shadow DOM. You can use CSS Variables to style these elements though. Here is a nice writeup on how to do that: https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables