u2ui 1.0.0

package/el/ico/ico.css

@@ -0,0 +1,111 @@
+html {
+    --u2-ico-font:'Segoe UI Symbol', 'Noto Emoji', sans-serif; /* noto on linux? */
+    /* --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg'; */
+}
+
+u2-ico {
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    --line-height: 1;
+    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;
+
+    fill:currentColor; /* for svg, dont use `u2-ico > svg { fill:currentColor }` because it can have the attribute fill="none" */
+
+    /* ok? */
+    xdisplay: inline-block; /* inline-flex has an other baseline? */
+    text-align:center;
+    vertical-align:middle;
+    --size: 1.5rem; /* 24px Preferred icon size, material-icons */
+    font-size: var(--size);
+    /* 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!
+    */
+}
+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? */
+}
+
+/* direct svg and js-loaded */
+u2-ico > svg {
+    vertical-align:bottom;
+    height:1em;
+    width:auto;
+    min-width:1em;
+    overflow:visible;
+    margin:auto;
+}
+u2-ico path[fill]:not([fill=none]) { fill:currentColor; }
+u2-ico path[stroke]:not([stroke=none]) { stroke: currentColor; }
+
+
+/* dir-variant */
+u2-ico[state] {
+    &::before {
+        display:none;
+    }
+    &[state="loading"] {
+        xvisibility:hidden;
+        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;
+}
+*/

package/el/ico/ico.js

@@ -0,0 +1,189 @@
+// icons from directory
+// [u2-ico] {
+//     --u2-ico-dir:'https://cdn.jsdelivr.net/npm/teenyicons@0.4.1/outline/x-{icon-name}.svg';
+// }
+
+
+/*
+const observeStyle = (
+	target,
+	property,
+	callback,
+	initialValue = ''
+) => {
+	let frameId, value
+	const css = getComputedStyle(target)
+	const observer = () => {
+		frameId = requestAnimationFrame(observer)
+		value = css.getPropertyValue(property).trim()
+		if (value !== initialValue) {
+			callback(initialValue = value);
+		}
+	}
+	observer()
+	return () => cancelAnimationFrame(frameId)
+}
+*/
+
+const uIco = class extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+
+        // observeStyle(this, '--u2-ico-dir', dir => {
+        //     this._handleIcon();
+        // });
+
+        if (this.firstElementChild) return; // skip if not text-only
+        if (!this.hasAttribute('icon')) {
+            const inner = this.textContent.trim();
+            if (inner) {
+                this.setAttribute('icon', inner);
+                this.setAttribute('aria-label', inner);
+            }
+        }
+        this._handleIcon();
+    }
+
+    static observedAttributes = ['icon'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'icon') {
+            setTimeout(() => this._handleIcon(),20); // wait for css to be applied
+        }
+    }
+    _handleIcon() {
+        // fetch svg if --ui-ico-directory is set
+        let icoDir = getComputedStyle(this).getPropertyValue('--u2-ico-dir').trim();
+        if (icoDir && this.hasAttribute('icon')) {
+            const dir = icoDir.slice(1, -1);
+            const name = this.getAttribute('icon');
+            const path = dirTemplateToUrl(dir, name);
+
+            requestAnimationFrame(()=>{
+                this.setAttribute('state','loading')
+            });
+
+            const pathStr = path.toString();
+            if (this._lastLoading === pathStr) return; // prevent multiple requests
+            this._lastLoading = pathStr;
+
+            loadSvgString(path).then(svg=>{
+                // if (path.origin !== location.origin) {} todo: sanitize svg
+
+                svg = svg.replace(/<!--.*?-->/gs, ''); // remove comments
+                svg = svg.replace(/<!DOCTYPE.*?>/gs, ''); // remove doctype
+                svg = svg.replace(/<\?xml.*?\?>/gs, ''); // remove xml header
+
+                requestAnimationFrame(()=>{
+                    this.innerHTML = svg; // requestAnimationFrame??
+                    this.querySelectorAll('[id]').forEach(el=>el.removeAttribute('id')); // remove ids
+                    const svgEl = this.firstElementChild;
+                    svgEl.removeAttribute('xmlns');
+                    svgEl.removeAttribute('xmlns:xlink');
+                    svgEl.removeAttribute('version');
+                    svgEl.setAttribute('aria-hidden', 'true');
+                    this.setAttribute('state','loaded');
+    
+                });
+
+                // // store to combine
+                // queueMicrotask(()=>{
+                //     const store = localStorage.getItem('u2-ico-used');
+                //     const icons = store ? JSON.parse(store) : {};
+                //     icons[icoDir] ??= {};
+                //     icons[icoDir][name] = this.innerHTML.trim();
+                //     localStorage.setItem('u2-ico-used', JSON.stringify(icons));
+                // });
+
+            }).catch(err=>{
+                console.error(err, this);
+                this.setAttribute('state','fail');
+            });
+        }
+    }
+        
+
+}
+
+// //combine svgs
+// setTimeout(function(){
+//     const store = localStorage.getItem('u2-ico-used');
+//     if (!store) return;
+//     const icons = JSON.parse(store);
+//     for (const [dir, names] of Object.entries(icons)) {
+//         console.log(`instead of loading from ${dir}, you can generate a local file with to following content and load it like /myFile.txt#{icon}:`);
+//         let content = '<svg><defs>\n\n';
+//         for (let [name, svg] of Object.entries(names)) {
+//             svg = svg.replace(/<svg /, `<svg id="${name}" `);
+//             content += `${svg}\n\n`;
+//         }
+//         content += '\n\n</defs></svg>';
+//         console.log(content);
+//     }
+// },199)
+
+function dirTemplateToUrl(dir, name) {
+    let [prefix, firstWord, between='', nextWord, suffix] = dir.split(/{(icon)([^n]*)?(name)?}/i);
+    if (!suffix) suffix = prefix.includes('#') ? '' : '.svg';
+    if (!nextWord) between = '-'; // if just: {icon}
+
+    // icon naming convertion
+    let fileName = name;
+    const upperFirst = firstWord?.[0] === 'I';
+    const upperWords = nextWord?.[0] === 'N';
+    if (upperFirst) fileName = fileName.replace(/^([a-z])/, g => g[0].toUpperCase()); // first upper
+    if (upperWords) fileName = fileName.replace(/-([a-z])/g, g => g[1].toUpperCase()); // camel-case
+    if (between !== '-') fileName = fileName.replace(/-/g, between);
+
+    return new URL(prefix + fileName + suffix, location.href);
+}
+
+async function loadSvgString(url) {
+    const hash = url.hash.substring(1);
+
+    // internal element
+    if (url.origin === location.origin && url.pathname === location.pathname) { // svg on the same document
+        if (hash) {
+            const element = document.getElementById(hash);
+            if (element) {
+                return element.outerHTML;
+            } else {
+                throw new Error("Element with id " + hash + " not found in the document");
+            }
+        }
+    }
+
+    const svg = await loadCached(url);
+    // temporary cache svg
+    
+    // external element
+    if (hash) { // todo, cache the svgDoc?
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svg, "image/svg+xml");
+        const element = svgDoc.getElementById(hash);
+        if (element) {
+            return element.outerHTML;
+        } else {
+            throw new Error("Element with id " + hash + " not found in the document");
+        }
+    }
+
+    // external document
+    return svg;
+}
+
+const cachedRequests = {};
+
+async function loadCached(url) {
+    if (cachedRequests[url]) return cachedRequests[url];
+    cachedRequests[url] = fetch(url, {cache: "force-cache"}).then(res => {
+        if (!res.ok) throw new Error(`Failed to fetch icon ${url}: ${res.status} ${res.statusText}`);
+        return res.text();
+    });
+    return cachedRequests[url];
+}
+
+
+customElements.define('u2-ico', uIco);

package/el/ico/manifest.json

@@ -0,0 +1,86 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+      {
+        "kind": "javascript-module",
+        "path": "ico.js",
+        "declarations": [
+          {
+            "kind": "class",
+            "description": "A custom HTML element for displaying icons from any icon set, icon font, or SVG directory.",
+            "name": "u2-ico",
+            "members": [],
+            "events": [],
+            "attributes": [
+                {
+                    "name": "icon",
+                    "description": "The name of the icon to display.",
+                    "u2Examples": ["home","star","check","close"]
+                },{
+                    "name": "state",
+                    "u2-type": ["loading", "loaded", "fail"],
+                    "description": "Read only, the state of the icon (loading, loaded, fail), this is set by javascript."
+                },{
+                    "name": "inline",
+                    "u2-type": "boolean",
+                    "description": "Size and baseline optimized for inline text."
+                }
+            ],
+            "cssProperties": [
+                {
+                    "name": "--u2-ico-dir",
+                    "syntax": "<string>",
+                    "description": "The directory where the SVG icons are located. If set, it overrides --u2-ico-font.",
+                    "u2Examples": [
+                        "'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg'",
+                        "'https://cdn.jsdelivr.net/npm/teenyicons@0.4.1/outline/'",
+                        "'https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/icons/'",
+                        "'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/icons/'",
+                        "'https://cdn.jsdelivr.net/npm/octicons@8.5.0/build/svg/'",
+                        "'https://cdn.jsdelivr.net/npm/bytesize-icons@1.4.0/dist/icons/'",
+                        "'https://cdn.jsdelivr.net/npm/ionicons@5.5.1/dist/svg/'",
+                        "'https://cdn.jsdelivr.net/npm/tabler-icons@1.35.0/icons/'",
+                        "'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/svgs/regular/'"
+                    ]
+                },{
+                    "name": "--u2-ico-font",
+                    "syntax": "<string>",
+                    "description": "The font used for the icons. The icon-font has to be declared in the CSS.",
+                    "u2Examples": [
+                        "Material Icons",
+                        "Teeny Icons",
+                        "Feather Icons"
+                    ]
+                },{
+                    "name": "--size",
+                    "syntax": "<length>",
+                    "description": "The size of the icon.",
+                    "u2Examples": ["1em","3em","24px"]
+                },{
+                    "name": "color",
+                    "syntax": "<color>",
+                    "description": "The color of the icon.",
+                    "u2Examples": ["red","rgba(0,0,0,0.5)","lightblue"]
+                }
+            ],            
+            "superclass": {
+              "name": "HTMLElement"
+            },
+            "tagName": "u2-ico",
+            "customElement": true
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-element-definition",
+            "name": "u2-ico",
+            "declaration": {
+              "name": "uIco",
+              "module": "ico.js"
+            }
+          }
+        ]
+      }
+    ]
+  }

package/el/ico/tests/combinations.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang=en>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>u2-ico Test</title>
+
+        <script src="../../../u2/tests/test-init.js" type=module async></script>
+        <script src="../../../u2/auto.js" type=module async></script>
+
+        <link rel=stylesheet href="../../../css/classless/simple.css">
+        <link rel="stylesheet" href="../font/Material Icons.css">
+
+<style>
+    body {
+        --u2-ico-font: 'Material Icons';
+    }
+    u2-ico[inline] {
+        vertical-align: -16%;
+    }
+</style>
+
+<body>
+
+
+
+<section>
+    <h2>button</h2>
+    <div id=buttonDemo>
+        <button>
+            <u2-ico inline>home</u2-ico>
+            Start Icon
+        </button>
+
+        <button>
+            <u2-ico inline icon=home style="--u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg'"></u2-ico>
+            Start Icon
+        </button>
+            
+
+
+        <button>Normal</button>
+
+
+        Icon only:
+        <button style="padding-inline:.4em">
+            <u2-ico inline>home</u2-ico>
+        </button>
+        u2-unstyle
+        <button class="u2-unstyle">
+            <u2-ico inline>home</u2-ico>
+        </button>
+
+    </div>
+    <u2-code element=buttonDemo trim editable> </u2-code>
+</div>
+
+<section id=badge>
+    <h2>.u1-badge</h2>
+    <div id=badgeDemo>
+        <u2-ico>home</u2-ico>
+        <sup class=u2-badge style="margin-left:-.7em; background-color: red;"></sup>
+    </div>
+    <u2-code element=badgeDemo trim editable> </u2-code>
+
+</section>
+
+<section>
+    <h2>.u1-tooltip</h2>
+
+    <div id="Tooltip">
+        <u2-ico>
+            home
+            <u2-tooltip style="font-family:system-ui, -apple-system, sans-serif">
+                Tooltip
+            </u2-tooltip>
+        </u2-ico>
+    </div>
+
+    <div>
+        <u2-code element=Tooltip trim editable> </u2-code>
+    </div>
+    
+
+</section>
+

package/el/ico/tests/emojis.html

@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name="viewport" content="width=device-width">
+
+    <link rel=stylesheet href="../../../css/norm/norm.css">
+    <link rel=stylesheet href="../../../css/base/base.css">
+    <link rel=stylesheet href="../../../css/classless/variables.css">
+    <link rel=stylesheet href="../../../css/classless/classless.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+    <link rel=stylesheet href="../../../css/classless/more.css">
+
+    <link rel="stylesheet" href="../ico.css">
+
+    <link rel="stylesheet" href="./util.css">
+    <script type=module async src="../ico.js"></script>
+    <script type=module async src="./util.js"></script>
+
+<body>
+
+<style>
+    @font-face {
+        font-family: 'segoe local';
+        src: local('Segoe UI Symbol');
+    }
+    @font-face {
+        font-family: 'Font Awesome url';
+        font-style: normal;
+        font-weight: 400;
+        xsrc: url(https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/webfonts/fa-solid-900.woff2) format('woff2');
+        src: url(https://pro.fontawesome.com/releases/v6.0.0-beta1/webfonts/fa-solid-900.woff2) format('woff2');
+    }
+    @font-face {
+        font-family: 'LigatureSymbols url';
+        font-style: normal;
+        font-weight: 400;
+        src: url(https://rawcdn.githack.com/kudakurage/LigatureSymbols/d54f43cd72d190b7a3c0b2ee1644fac770b4a146/LigatureSymbols-2.11.woff) format('woff');
+    }
+    @font-face {
+        font-family: 'NotoEmoji url';
+        src: url(https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji@2.038/fonts/NotoEmoji-Regular.ttf);
+    }
+    @font-face { /* http://emojione.com/developers/ */
+        font-family: 'Emojione url';
+        src: url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff2") format("woff2");
+    }
+    @font-face {
+        font-family: 'Material Icons url';
+        src: url(https://fonts.gstatic.com/s/materialicons/v129/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+    }
+    @font-face {
+        font-family: 'Material Symbols Outlined url';
+        src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v7/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
+    }
+    @font-face {
+        font-family: 'openmoji';
+        src: url(https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/font/OpenMoji-Color.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: 'openmoji bw';
+        src: url(https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/font/OpenMoji-Black.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: 'twemoji';
+        src: url(https://cdn.jsdelivr.net/npm/twemoji-colr-font@14.0.2/twemoji.woff2) format('woff2');
+    }
+
+    u2-ico.afterHack:after { /* chrome does not need :after-trick (why? => because it uses segoe ui symbol as font?) , but ff, not working in safari :( */
+        content: "\00FE0E";
+        font:inherit;
+        /* for safari (it displays a stupid rect) */
+        xopacity:0;
+    }
+    u2-ico.proposed {
+        font-palette: dark;             /* ff-107 ch-101 s-15.4 */
+        font-variant-emoji: text;       /* safari, ff-108 (seams not to work correct) */
+        text-transform: text;           /* proposed */
+        font-variant-color: monochrome; /* proposed */
+        font-color: monochrome;         /* proposed */
+    }
+
+/*
+https://stackoverflow.com/a/40020609/4865307
+https://docs.google.com/spreadsheets/d/1KQDH9uArJr-8m4UvAEd02ixaX_-wauSwjy9qYCwIOvE/edit#gid=645289137
+
+
+# emoji list
+https://apps.timwhitlock.info/emoji/tables/unicode
+https://www.unicode.org/emoji/charts/full-emoji-list.html
+
+# monochrome emoji fonts
+
+Noto Emoji
+https://www.fontspace.com/noto-emoji-font-f22283
+cdn: https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji@2.038/fonts/NotoEmoji-Regular.ttf
+
+Symbola Font
+https://www.fontspace.com/symbola-font-f22021
+
+Code2003
+https://www.fontspace.com/code2003-font-f24444
+
+Unifont Font (pixelated)
+https://www.fontspace.com/unifont-font-f26370
+
+EmojiSymbols Font (c)blockworks - Kenichi Kaneko (attribution required)
+http://emojisymbols.com/
+
+*/
+</style>
+
+<h2>UTF-8 flat symbols system</h2>
+<div>
+    <input onchange="document.querySelectorAll('u2-ico').forEach(el=>{ [...el.innerHTML].length === 1 && (el.innerHTML = this.value) })">
+    <h3>Times</h3>
+    <table>
+        <tr>
+            <td>Font Family
+            <td> 🔍
+            <td>proposed features
+            <td>::after hack
+            <td>ligatures
+        <tr style="--u2-ico-font:times">
+            <td> times
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'Segoe UI Symbol'">
+            <td> Segoe UI Symbol
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'segoe local'">
+            <td> Segoe UI Symbol local()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'Noto Emoji'">
+            <td> Noto Emoji
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'NotoEmoji url'">
+            <td> NotoEmoji url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'Font Awesome url'">
+            <td> Font Awesome url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'openmoji bw'">
+            <td> OpenMoji bw url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+
+        <tr style="--u2-ico-font:'openmoji'">
+            <td> OpenMoji url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'twemoji'">
+            <td> twemoji url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+
+        <tr style="--u2-ico-font:'Material Icons url'">
+            <td> Material Icons url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'Material Symbols Outlined url'">
+            <td> Material Symbols Outlined url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+        <tr style="--u2-ico-font:'LigatureSymbols url'">
+            <td> LigatureSymbols url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico>
+            <td> <u2-ico class="ligatures">search</u2-ico>
+
+
+        <!--tr style="--u2-ico-font:'Emojione url'">
+            <td> Emojione url()
+            <td> <u2-ico>🔍</u2-ico>
+            <td> <u2-ico class="proposed">🔍</u2-ico>
+            <td> <u2-ico class="afterHack">🔍</u2-ico-->
+
+    </table>
+
+    SVG experiment:
+    <svg width="100" height="100" style="border:1px solid; display:block; font-family: 'Material Symbols Outlined url'; overflow:visible">
+        <text x="50" y="50" dominant-baseline="middle" text-anchor="middle" font-size="50" clip-path="url(#clip-emoji)" style="outline:1px solid">🔍</text>
+    </svg>
+
+</div>