html {
    --u2-ico-font:'Segoe UI Symbol', 'Noto Emoji', sans-serif; /* noto on linux? */
    --u2-ico-dir-material: 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg';
    --u2-ico-dir-material-host: var(--u2-ico-dir-material);
}
:host { /* If used in a shadow host, inherit Material or define a new one. */
    --u2-ico-dir-material: var(--u2-ico-dir-material-host, 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg');
}
u2-ico {
    --size: 1.5rem; /* 24px Preferred icon size, material-icons */
    font-size: var(--size);
    line-height: 1;
    --line-height: 1;

    /* ok? */
    text-align:center;
    vertical-align:middle;
    /* overflow:hidden
    + prevents layout-shift on font load.
    - But baseline gets to the box instead of the text.
    - Some Icons on some Fonts may get cuted!
    */

    /* svg */
    fill:currentColor; /* for svg, dont use `u2-ico > svg { fill:currentColor }` because it can have the attribute fill="none" */

    /* icon-fonts */
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    overflow-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased; /* all WebKit browsers. */
    text-rendering: optimizeLegibility; /* Safari and Chrome. */
    -moz-osx-font-smoothing: grayscale; /* Firefox. */
    font-feature-settings: 'liga'; /* IE only? */
    font-family: var(--u2-ico-font) !important;

    /* utf-8 */
    font-variant-emoji: text;       /* chrome-131, ff-141 */

}
u2-ico:not([hidden]) { display: inline-block; }
u2-ico[icon]:empty:before { /* todo if supported: :where([icon]::before) { */
    content:attr(icon);
}



/* inline */
u2-ico[inline] {
    overflow:visible;
    --size:1.2em;
    /*
    best option?:
    centering using font-relative units
    1ex support: good
    1cap support: only firefox
    https://codepen.io/kizu/pen/dyeXPJP?editors=1100
    */
    vertical-align: -11%;
    /* display: contents; todo? */
    /* margin:auto;  todo: dont stretch if its a flex-item? */
}

/* SVG */
u2-ico > svg {
    vertical-align:bottom;
    height:1em;
    width:auto;
    min-width:1em;
    overflow:visible;
    margin:auto;
}
u2-ico [fill]:not([fill=none]) { fill:currentColor; }
u2-ico [stroke]:not([stroke=none]) { stroke: currentColor; }
/* zzz, was:
u2-ico path[fill]:not([fill=none]) { fill:currentColor; }
u2-ico path[stroke]:not([stroke=none]) { stroke: currentColor; }
*/


/* SVG load (dir-variant) */
u2-ico[state] {
    &::before {
        display:none;
    }
    &[state="loading"] {
        overflow: clip;
        width:1em;
    }
    &[state="fail"] {
        font-size: 0.8em;
        width: auto;
        ::before {
            display:block;
        }
    }
}
u2-ico:empty:not([icon])::before {
    content: '⚠️';
}

/*
u2-ico[state]:not([state=loaded]) {
    overflow:clip;
    width: 1em;
    height: 1em;
}
u2-ico[state]:before {
    display:none;
}
u2-ico[state=fail]:before {
    display:block;
}
u2-ico[state="fail"]:is([state="fail"]) {
    font-size: 0.8em;
    overflow: visible;
    width: auto;
}
*/