/* style */
.icon-wrapper.outline svg path{
    fill: none;
    stroke: black;
    stroke-width: 4%;
    stroke-linejoin: round;
    paint-order: stroke;
}
.icon-wrapper.outline svg{overflow: visible;}

.red {fill:red;}
.outline.red svg path {stroke:red;}

.white {fill:white;}
.outline.white svg path {stroke:white;}

.green {fill:green;}
.outline.green svg path{stroke: green;}

.purple {fill: purple;}
.outline.purple {stroke: purple;}



/* Wrapper Core */
.icon-wrapper {
    display: inline-flex;
    /*align-self: center;*/
    align-items: center;
}

.icon-wrapper svg {
    height: 1em;
    width: 1em;
    fill: inherit;
    /*top: .125em;*/
    position: relative;
 
}
.icon-wrapper.icon-before svg{
    margin-right: 0.25em;
}
.icon-wrapper.icon-after svg {
    margin-left: 0.25em;
}

svg.icon-svg {
    top: .125em;
    /*google says 11.5% of the type size. But some others say 12,5% https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4  .. it's around 12% */
    position: relative;
}

/* NOWRAP (not possible to align with text) */

svg.icon-svg {
    height: 1em;
    width: 1em;
    fill: inherit;
}

/* DEMO */
*[data-icon="search"] {
    color: purple;
    fill: purple;
    --svg-path: https: //fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/search/wght600/48px.svg;
}