u2ui 1.0.0

package/el/ico/README.md

@@ -0,0 +1,162 @@
+# <u2-ico> - element
+Universal icon-element
+
+## Features
+
+- Use any icon set you want
+- You can put direct SVG inside the element
+- You can use a icon-font
+- Or you define a directory, where the svg-files are located
+
+## Usage
+
+```html
+<u2-ico aria-label="alien">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,16a96.11,96.11,0,0,0-96,96c0,24,12.56,55.06,33.61,83,21.18,28.15,44.5,45,62.39,45s41.21-16.81,62.39-45c21.05-28,33.61-59,33.61-83A96.11,96.11,0,0,0,128,16Zm49.61,169.42C160.24,208.49,140.31,224,128,224s-32.24-15.51-49.61-38.58C59.65,160.5,48,132.37,48,112a80,80,0,0,1,160,0C208,132.37,196.35,160.5,177.61,185.42ZM120,136A40,40,0,0,0,80,96a16,16,0,0,0-16,16,40,40,0,0,0,40,40A16,16,0,0,0,120,136ZM80,112a24,24,0,0,1,24,24h0A24,24,0,0,1,80,112Zm96-16a40,40,0,0,0-40,40,16,16,0,0,0,16,16,40,40,0,0,0,40-40A16,16,0,0,0,176,96Zm-24,40a24,24,0,0,1,24-24A24,24,0,0,1,152,136Zm0,48a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,184Z"></path></svg>
+</u2-ico>
+
+
+```
+
+```css
+@font-face {
+    font-family: 'RemixFilled';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://cdn.jsdelivr.net/npm/remixicon-ligatures@2.5.0/fonts/RemixFilled.woff2) format('woff2');
+}
+
+[icon="book"] {
+    --u2-ico-dir: 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/regular/';
+    color:blue;
+}
+[icon="star"] {
+    --u2-ico-font: 'RemixFilled';
+    color:green;
+}
+u2-ico:has(>svg) {
+    color:red;
+}
+u2-ico {
+    --size:3rem;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/ico/ico.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/ico/ico.min.js" type=module async></script>
+```
+
+## Demos
+
+[combinations.html](http://gcdn.li/u2ui/u2@main/el/ico/tests/combinations.html)  
+[emojis.html](http://gcdn.li/u2ui/u2@main/el/ico/tests/emojis.html)  
+[fonts.html](http://gcdn.li/u2ui/u2@main/el/ico/tests/fonts.html)  
+[ico-directory.html](http://gcdn.li/u2ui/u2@main/el/ico/tests/ico-directory.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/ico/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/ico/tests/test.html)  
+
+## Variant "icon-directory"
+
+Use the css-property `--u2-ico-dir:https://x.y/icons-directory/` to define where the icons are located.  
+The value must be in quotes.  
+
+### Placeholder "{icon}"
+
+If the icon is not located at the end of the path (https://x.y/star.svg), you can use this placeholder:  
+```css
+html {
+    --u2-ico-dir:'https://x.y/24x-{icon}/baseline.svg';
+}
+```
+
+### Icon-naming
+We prefer to alwas use lowercase names for the icons and use the `-` as a separator. E.g. `arrow-right`.  
+But if your prefered Icon-Set uses other naming conventions, you can use the placeholder `{icon-name}` in the same form as the Iconset's files are named:   
+`{iconName}` => first word is lowercase, second word is uppercase and there is no separator.
+
+```css
+html {
+    --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@adobe/spectrum-css-workflow-icons@1.4.2/24/{IconName}';
+}
+```
+
+### Some icon sets
+
+See it in action:
+[ico-directory.html](https://raw.githack.com/u2ui/ico.el/main/tests/ico-directory.html)
+
+| Icon set   | Directory |
+| --------   | --------- |
+| Material                  | `https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg` |
+| Teenyicons                | `https://cdn.jsdelivr.net/npm/teenyicons@0.4.1/outline/` |
+| Feather                   | `https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/icons/` |
+| Bootstrap                 | `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/icons/` |
+| Octicons                  | `https://cdn.jsdelivr.net/npm/octicons@8.5.0/build/svg/` |
+| Bytesize                  | `https://cdn.jsdelivr.net/npm/bytesize-icons@1.4.0/dist/icons/` |
+| Ionicons                  | `https://cdn.jsdelivr.net/npm/ionicons@5.5.1/dist/svg/` |
+| Tabler Icons              | `https://cdn.jsdelivr.net/npm/tabler-icons@1.35.0/icons/` |
+| Fontawesome regular       | `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/svgs/regular/` |
+| Fontawesome solid         | `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/svgs/solid/` |
+| Fontawesome brands        | `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/svgs/brands/` |
+| Dripicons                 | `https://cdn.jsdelivr.net/npm/dripicons@2.0.0/SVG/` |
+| CoreUI Icons              | `https://cdn.jsdelivr.net/npm/@coreui/icons@2.0.1/svg/free/cil-` |
+| open-iconic               | `https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/svg/` |
+| Radix                     | `https://cdn.jsdelivr.net/gh/radix-ui/icons@3.1.0/packages/radix-icons/icons/15/` |
+| Heroicons outline         | `https://cdn.jsdelivr.net/npm/heroicons@1.0.1/outline/` |
+| Heroicons solid           | `https://cdn.jsdelivr.net/npm/heroicons@1.0.1/solid/` |
+| Typicons                  | `https://cdn.jsdelivr.net/npm/typicons.font@2.1.2/src/svg/` |
+| Boxicons regular          | `https://cdn.jsdelivr.net/npm/boxicons@2.0.7/svg/regular/bx-` |
+| Boxicons solid            | `https://cdn.jsdelivr.net/npm/boxicons@2.0.7/svg/solid/bxs-` |
+| linearicons               | `https://cdn.jsdelivr.net/npm/linearicons@1.0.2/dist/svg/` |
+| FluentUI regular          | `https://cdn.jsdelivr.net/npm/@svg-icons/fluentui-system-regular@1.56.0/` |
+| FluentUI filled           | `https://cdn.jsdelivr.net/npm/@svg-icons/fluentui-system-filled@1.56.0/` |
+| Evil Icons                | `https://cdn.jsdelivr.net/npm/evil-icons@1.10.1/assets/icons/ei-` |
+| Eva Icons fill            | `https://cdn.jsdelivr.net/npm/eva-icons@1.1.3/fill/svg/` |
+| Eva Icons outline         | `https://cdn.jsdelivr.net/npm/eva-icons@1.1.3/outline/svg/{icon}-outline.svg` |
+| Zondicons                 | `https://cdn.jsdelivr.net/npm/zondicons@1.2.0/` |
+| holasvg-icons             | `https://cdn.jsdelivr.net/gh/marianabeldi/holasvg-icons/icons/` |
+| Jam icons                 | `https://cdn.jsdelivr.net/gh/michaelampr/jam@3.1.0/icons/` |
+| entypo                    | `https://cdn.jsdelivr.net/npm/entypo@2.2.1/src/Entypo/` |
+| Adobe Spectrum            | `https://cdn.jsdelivr.net/npm/@adobe/spectrum-css-workflow-icons@1.4.2/24/{IconName}.svg` |
+| mono icons                | `https://cdn.jsdelivr.net/npm/mono-icons@1.3.1/svg/` |
+| line awesome              | `https://cdn.jsdelivr.net/npm/line-awesome@1.3.0/svg/` |
+| flat color icons          | `https://cdn.jsdelivr.net/npm/flat-color-icons@1.1.0/svg/` |
+| icons8 windows-10-icons   | `https://cdn.jsdelivr.net/npm/windows-10-icons@1.0.1/svg/production/{icon_name}.svg` |
+| fticons                   | `https://cdn.jsdelivr.net/npm/@financial-times/fticons@1.23.1/svg/` |
+| photon icons              | `https://cdn.jsdelivr.net/npm/photon-icons@5.4.0/icons/desktop/` |
+| devicons                  | `https://cdn.jsdelivr.net/npm/devicons@1.8.0/!SVG/{icon_name}` |
+| Figma UI Icons            | `https://cdn.jsdelivr.net/npm/css.gg@2.0.0/icons/svg/` |
+| ifolio licons             | `https://cdn.jsdelivr.net/gh/ifolio/licons@master/svg/` |
+
+## Variant "icon-font":
+
+Define the font used for the icons:
+```css
+@font-face {
+    font-family: 'my icon font';
+    font-style: normal;
+    font-weight: 400;
+    src: url(my-icon-font.woff2) format('woff2');
+}
+html {
+    --u2-ico-font:'my icon font';
+}
+```
+
+Note: `--u2-ico-dir` is stronger then `--u2-ico-font`.
+
+## Variant "SVG":
+
+Just put you svg inside the element:
+```html
+<u2-ico><svg>...</svg></u2-ico>
+```
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/el/ico/font/Font Awesome.css

@@ -0,0 +1,22 @@
+/* solid and brand are free */
+
+/*
+wow, i can use same font-family-name in two font-face-rules.
+disadvantage: both fonts are loaded regardless of used in content
+*/
+
+@font-face {
+  font-family: 'Font Awesome';
+  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: 'Font Awesome';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/webfonts/fa-brands-400.woff2) format('woff2');
+}
+

package/el/ico/font/LigatureSymbols.css

@@ -0,0 +1,7 @@
+/* http://kudakurage.com/ligature_symbols/ */
+@font-face {
+  font-family: 'LigatureSymbols';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://rawcdn.githack.com/kudakurage/LigatureSymbols/d54f43cd72d190b7a3c0b2ee1644fac770b4a146/LigatureSymbols-2.11.woff) format('woff');
+}

package/el/ico/font/Material Icons.css

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v77/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}

package/el/ico/font/RemixFilled.css

@@ -0,0 +1,8 @@
+/* https://remixicon.com/ */
+
+@font-face {
+  font-family: 'RemixFilled';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.jsdelivr.net/npm/remixicon-ligatures@2.5.0/fonts/RemixFilled.woff2) format('woff2');
+}

package/el/ico/font/RemixOutlined.css

@@ -0,0 +1,8 @@
+/* https://remixicon.com/ */
+
+@font-face {
+  font-family: 'RemixOutlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.jsdelivr.net/npm/remixicon-ligatures@2.5.0/fonts/RemixOutlined.woff2) format('woff2');
+}

package/el/ico/font/old/anicons.css

@@ -0,0 +1,31 @@
+/* https://typogram.github.io/Anicons/use.html */
+
+@font-face {
+    font-family: 'Anicons Regular';
+    font-style: normal;
+    font-weight: 400;
+    xxxsrc: url(https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/AniconsGX.ttf);
+    src: url(https://rawcdn.githack.com/Typogram/Anicons/9f441f3231e73ce0a395ede0070276779f13c882/webfonts/AniconsGX.ttf);
+
+}
+@font-face {
+    font-family: 'Anicons Color';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://rawcdn.githack.com/Typogram/Anicons/9f441f3231e73ce0a395ede0070276779f13c882/webfonts/AniconsColorGX.ttf);
+}
+
+u2-ico[font="anicon"] {
+    --u2-ico-font:"Anicons Regular";
+    transition: font-variation-settings .5s ease;
+    font-variation-settings: "TIME" 1;
+}
+u2-ico[font="anicon"][variant=color] {
+    --u2-ico-font:"Anicons Color";
+}
+
+:focus u2-ico[font=anicon][animate=focus] ,
+u2-ico[font=anicon][animate=hover]:hover ,
+u2-ico[font=anicon][animated] {
+    font-variation-settings: "TIME" 100;
+}

package/el/ico/font/old/devicons.css

@@ -0,0 +1,210 @@
+@font-face {
+    font-family: 'devicons';
+    src: url("https://cdn.jsdelivr.net/npm/devicons@1.8.0/fonts/devicons.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+u2-ico[font=devicons] {
+    --u2-ico-font:'devicons';
+}
+
+/* feature syntax? *
+u2-ico {
+    &[icon=git] {--after:"\e602"}
+    &[icon=git_compare] {--after:"\e602"}
+    &[icon=git]:after {--after:"\e602"}
+    &[icon=git_compare]:after {--after:"\e628"}
+} /* */
+
+u2-ico[icon=git]:after { content: "\e602" }
+u2-ico[icon=git_compare]:after { content: "\e628" }
+u2-ico[icon=git_branch]:after { content: "\e625" }
+u2-ico[icon=git_commit]:after { content: "\e629" }
+u2-ico[icon=git_pull_request]:after { content: "\e626" }
+u2-ico[icon=git_merge]:after { content: "\e627" }
+u2-ico[icon=bitbucket]:after { content: "\e603" }
+u2-ico[icon=github_alt]:after { content: "\e608" }
+u2-ico[icon=github_badge]:after { content: "\e609" }
+u2-ico[icon=github]:after { content: "\e60a" }
+u2-ico[icon=github_full]:after { content: "\e617" }
+u2-ico[icon=java]:after { content: "\e638" }
+u2-ico[icon=ruby]:after { content: "\e639" }
+u2-ico[icon=scala]:after { content: "\e637" }
+u2-ico[icon=python]:after { content: "\e63c" }
+u2-ico[icon=go]:after { content: "\e624" }
+u2-ico[icon=ruby_on_rails]:after { content: "\e63b" }
+u2-ico[icon=django]:after { content: "\e61d" }
+u2-ico[icon=markdown]:after { content: "\e63e" }
+u2-ico[icon=php]:after { content: "\e63d" }
+u2-ico[icon=mysql]:after { content: "\e604" }
+u2-ico[icon=streamline]:after { content: "\e605" }
+u2-ico[icon=database]:after { content: "\e606" }
+u2-ico[icon=laravel]:after { content: "\e63f" }
+u2-ico[icon=javascript]:after { content: "\e64e" }
+u2-ico[icon=angular]:after { content: "\e653" }
+u2-ico[icon=backbone]:after { content: "\e652" }
+u2-ico[icon=coffeescript]:after { content: "\e651" }
+u2-ico[icon=jquery]:after { content: "\e650" }
+u2-ico[icon=modernizr]:after { content: "\e620" }
+u2-ico[icon=jquery_ui]:after { content: "\e654" }
+u2-ico[icon=ember]:after { content: "\e61b" }
+u2-ico[icon=dojo]:after { content: "\e61c" }
+u2-ico[icon=nodejs]:after { content: "\e619" }
+u2-ico[icon=nodejs_small]:after { content: "\e618" }
+u2-ico[icon=javascript_shield]:after { content: "\e64f" }
+u2-ico[icon=bootstrap]:after { content: "\e647" }
+u2-ico[icon=sass]:after { content: "\e64b" }
+u2-ico[icon=css3_full]:after { content: "\e64a" }
+u2-ico[icon=css3]:after { content: "\e649" }
+u2-ico[icon=html5]:after { content: "\e636" }
+u2-ico[icon=html5_multimedia]:after { content: "\e632" }
+u2-ico[icon=html5_device_access]:after { content: "\e633" }
+u2-ico[icon=html5_3d_effects]:after { content: "\e635" }
+u2-ico[icon=html5_connectivity]:after { content: "\e634" }
+u2-ico[icon=ghost_small]:after { content: "\e614" }
+u2-ico[icon=ghost]:after { content: "\e61f" }
+u2-ico[icon=magento]:after { content: "\e640" }
+u2-ico[icon=joomla]:after { content: "\e641" }
+u2-ico[icon=jekyll_small]:after { content: "\e60d" }
+u2-ico[icon=drupal]:after { content: "\e642" }
+u2-ico[icon=wordpress]:after { content: "\e60b" }
+u2-ico[icon=grunt]:after { content: "\e64c" }
+u2-ico[icon=bower]:after { content: "\e64d" }
+u2-ico[icon=npm]:after { content: "\e61e" }
+u2-ico[icon=yahoo_small]:after { content: "\e62b" }
+u2-ico[icon=yahoo]:after { content: "\e615" }
+u2-ico[icon=bing_small]:after { content: "\e600" }
+u2-ico[icon=windows]:after { content: "\e60f" }
+u2-ico[icon=linux]:after { content: "\e612" }
+u2-ico[icon=ubuntu]:after { content: "\e63a" }
+u2-ico[icon=android]:after { content: "\e60e" }
+u2-ico[icon=apple]:after { content: "\e611" }
+u2-ico[icon=appstore]:after { content: "\e613" }
+u2-ico[icon=phonegap]:after { content: "\e630" }
+u2-ico[icon=blackberry]:after { content: "\e623" }
+u2-ico[icon=stackoverflow]:after { content: "\e610" }
+u2-ico[icon=techcrunch]:after { content: "\e62c" }
+u2-ico[icon=codrops]:after { content: "\e62f" }
+u2-ico[icon=css_tricks]:after { content: "\e601" }
+u2-ico[icon=smashing_magazine]:after { content: "\e62d" }
+u2-ico[icon=netmagazine]:after { content: "\e62e" }
+u2-ico[icon=codepen]:after { content: "\e616" }
+u2-ico[icon=cssdeck]:after { content: "\e62a" }
+u2-ico[icon=hackernews]:after { content: "\e61a" }
+u2-ico[icon=dropbox]:after { content: "\e607" }
+u2-ico[icon=google_drive]:after { content: "\e631" }
+u2-ico[icon=visualstudio]:after { content: "\e60c" }
+u2-ico[icon=unity_small]:after { content: "\e621" }
+u2-ico[icon=raspberry_pi]:after { content: "\e622" }
+u2-ico[icon=chrome]:after { content: "\e643" }
+u2-ico[icon=ie]:after { content: "\e644" }
+u2-ico[icon=firefox]:after { content: "\e645" }
+u2-ico[icon=opera]:after { content: "\e646" }
+u2-ico[icon=safari]:after { content: "\e648" }
+u2-ico[icon=swift]:after { content: "\e655" }
+u2-ico[icon=symfony]:after { content: "\e656" }
+u2-ico[icon=symfony_badge]:after { content: "\e657" }
+u2-ico[icon=less]:after { content: "\e658" }
+u2-ico[icon=stylus]:after { content: "\e659" }
+u2-ico[icon=trello]:after { content: "\e65a" }
+u2-ico[icon=atlassian]:after { content: "\e65b" }
+u2-ico[icon=jira]:after { content: "\e65c" }
+u2-ico[icon=envato]:after { content: "\e65d" }
+u2-ico[icon=snap_svg]:after { content: "\e65e" }
+u2-ico[icon=raphael]:after { content: "\e65f" }
+u2-ico[icon=google_analytics]:after { content: "\e660" }
+u2-ico[icon=compass]:after { content: "\e661" }
+u2-ico[icon=onedrive]:after { content: "\e662" }
+u2-ico[icon=gulp]:after { content: "\e663" }
+u2-ico[icon=atom]:after { content: "\e664" }
+u2-ico[icon=cisco]:after { content: "\e665" }
+u2-ico[icon=nancy]:after { content: "\e666" }
+u2-ico[icon=clojure]:after { content: "\e668" }
+u2-ico[icon=clojure_alt]:after { content: "\e66a" }
+u2-ico[icon=perl]:after { content: "\e669" }
+u2-ico[icon=celluloid]:after { content: "\e66b" }
+u2-ico[icon=w3c]:after { content: "\e66c" }
+u2-ico[icon=redis]:after { content: "\e66d" }
+u2-ico[icon=postgresql]:after { content: "\e66e" }
+u2-ico[icon=webplatform]:after { content: "\e66f" }
+u2-ico[icon=jenkins]:after { content: "\e667" }
+u2-ico[icon=requirejs]:after { content: "\e670" }
+u2-ico[icon=opensource]:after { content: "\e671" }
+u2-ico[icon=typo3]:after { content: "\e672" }
+u2-ico[icon=uikit]:after { content: "\e673" }
+u2-ico[icon=doctrine]:after { content: "\e674" }
+u2-ico[icon=groovy]:after { content: "\e675" }
+u2-ico[icon=nginx]:after { content: "\e676" }
+u2-ico[icon=haskell]:after { content: "\e677" }
+u2-ico[icon=zend]:after { content: "\e678" }
+u2-ico[icon=gnu]:after { content: "\e679" }
+u2-ico[icon=yeoman]:after { content: "\e67a" }
+u2-ico[icon=heroku]:after { content: "\e67b" }
+u2-ico[icon=debian]:after { content: "\e67d" }
+u2-ico[icon=travis]:after { content: "\e67e" }
+u2-ico[icon=dotnet]:after { content: "\e67f" }
+u2-ico[icon=codeigniter]:after { content: "\e680" }
+u2-ico[icon=javascript_badge]:after { content: "\e681" }
+u2-ico[icon=yii]:after { content: "\e682" }
+u2-ico[icon=msql_server]:after { content: "\e67c" }
+u2-ico[icon=composer]:after { content: "\e683" }
+u2-ico[icon=krakenjs_badge]:after { content: "\e684" }
+u2-ico[icon=krakenjs]:after { content: "\e685" }
+u2-ico[icon=mozilla]:after { content: "\e686" }
+u2-ico[icon=firebase]:after { content: "\e687" }
+u2-ico[icon=sizzlejs]:after { content: "\e688" }
+u2-ico[icon=creativecommons]:after { content: "\e689" }
+u2-ico[icon=creativecommons_badge]:after { content: "\e68a" }
+u2-ico[icon=mitlicence]:after { content: "\e68b" }
+u2-ico[icon=senchatouch]:after { content: "\e68c" }
+u2-ico[icon=bugsense]:after { content: "\e68d" }
+u2-ico[icon=extjs]:after { content: "\e68e" }
+u2-ico[icon=mootools_badge]:after { content: "\e68f" }
+u2-ico[icon=mootools]:after { content: "\e690" }
+u2-ico[icon=ruby_rough]:after { content: "\e691" }
+u2-ico[icon=komodo]:after { content: "\e692" }
+u2-ico[icon=coda]:after { content: "\e693" }
+u2-ico[icon=bintray]:after { content: "\e694" }
+u2-ico[icon=terminal]:after { content: "\e695" }
+u2-ico[icon=code]:after { content: "\e696" }
+u2-ico[icon=responsive]:after { content: "\e697" }
+u2-ico[icon=dart]:after { content: "\e698" }
+u2-ico[icon=aptana]:after { content: "\e699" }
+u2-ico[icon=mailchimp]:after { content: "\e69a" }
+u2-ico[icon=netbeans]:after { content: "\e69b" }
+u2-ico[icon=dreamweaver]:after { content: "\e69c" }
+u2-ico[icon=brackets]:after { content: "\e69d" }
+u2-ico[icon=eclipse]:after { content: "\e69e" }
+u2-ico[icon=cloud9]:after { content: "\e69f" }
+u2-ico[icon=scrum]:after { content: "\e6a0" }
+u2-ico[icon=prolog]:after { content: "\e6a1" }
+u2-ico[icon=terminal_badge]:after { content: "\e6a2" }
+u2-ico[icon=code_badge]:after { content: "\e6a3" }
+u2-ico[icon=mongodb]:after { content: "\e6a4" }
+u2-ico[icon=meteor]:after { content: "\e6a5" }
+u2-ico[icon=meteorfull]:after { content: "\e6a6" }
+u2-ico[icon=fsharp]:after { content: "\e6a7" }
+u2-ico[icon=rust]:after { content: "\e6a8" }
+u2-ico[icon=ionic]:after { content: "\e6a9" }
+u2-ico[icon=sublime]:after { content: "\e6aa" }
+u2-ico[icon=appcelerator]:after { content: "\e6ab" }
+u2-ico[icon=asterisk]:after { content: "\e6ac" }
+u2-ico[icon=aws]:after { content: "\e6ad" }
+u2-ico[icon=digital-ocean]:after { content: "\e6ae" }
+u2-ico[icon=dlang]:after { content: "\e6af" }
+u2-ico[icon=docker]:after { content: "\e6b0" }
+u2-ico[icon=erlang]:after { content: "\e6b1" }
+u2-ico[icon=google-cloud-platform]:after { content: "\e6b2" }
+u2-ico[icon=grails]:after { content: "\e6b3" }
+u2-ico[icon=illustrator]:after { content: "\e6b4" }
+u2-ico[icon=intellij]:after { content: "\e6b5" }
+u2-ico[icon=materializecss]:after { content: "\e6b6" }
+u2-ico[icon=openshift]:after { content: "\e6b7" }
+u2-ico[icon=photoshop]:after { content: "\e6b8" }
+u2-ico[icon=rackspace]:after { content: "\e6b9" }
+u2-ico[icon=react]:after { content: "\e6ba" }
+u2-ico[icon=redhat]:after { content: "\e6bb" }
+u2-ico[icon=scriptcs]:after { content: "\e6bc" }
+u2-ico[icon=sqllite]:after { content: "\e6c4" }
+u2-ico[icon=vim]:after { content: "\e6c5" }

package/el/ico/font/old/material.all.css

@@ -0,0 +1,36 @@
+/* https://material.io/resources/icons/ */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v77/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v45/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Material Icons Round';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconsround/v44/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Material Icons Sharp';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconssharp/v45/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Material Icons Two Tone';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconstwotone/v43/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2) format('woff2');
+}
+u2-ico[font=material]                   { --u2-ico-font:Material Icons; }
+u2-ico[font=material][variant=outlined] { --u2-ico-font:Material Icons Outlined; }
+u2-ico[font=material][variant=round]    { --u2-ico-font:Material Icons Round; }
+u2-ico[font=material][variant=sharp]    { --u2-ico-font:Material Icons Sharp; }
+u2-ico[font=material][variant=twotone]  { --u2-ico-font:Material Icons Two Tone; }

package/el/ico/font/old/remix.css

@@ -0,0 +1,15 @@
+/* https://remixicon.com/ */
+@font-face {
+    font-family: 'RemixOutlined';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://cdn.jsdelivr.net/npm/remixicon-ligatures@2.5.0/fonts/RemixOutlined.woff2) format('woff2');
+  }
+  @font-face {
+    font-family: 'RemixFilled';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://cdn.jsdelivr.net/npm/remixicon-ligatures@2.5.0/fonts/RemixFilled.woff2) format('woff2');
+  }
+  u2-ico[font=remix] { --u2-ico-font:RemixFilled; }
+  u2-ico[font=remix][variant=outlined] { --u2-ico-font:RemixOutlined; }

package/el/ico/font/old/utf8.css

@@ -0,0 +1,54 @@
+/*
+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/
+
+*/
+
+/* good names */
+u2-ico[font=utf8][icon=close]:before { content:'✕' }
+u2-ico[font=utf8][icon=star]:before { content:'★' }
+u2-ico[font=utf8][icon=heart]:before { content:'♥' }
+u2-ico[font=utf8][icon=airplane]:before { content:'✈' }
+u2-ico[font=utf8][icon=check]:before { content:'✔' }
+u2-ico[font=utf8][icon=sun]:before { content:'☼' }
+u2-ico[font=utf8][icon=pensil]:before { content:'✎' }
+u2-ico[font=utf8][icon=previous]:before { content:'❮' }
+u2-ico[font=utf8][icon=next]:before { content:'❯' }
+u2-ico[font=utf8][icon=telefon]:before { content:'☎' }
+u2-ico[font=utf8][icon=cloud]:before { content:'☁' }
+u2-ico[font=utf8][icon=email]:before { content:'✉' }
+u2-ico[font=utf8][icon=drag_indicator]:before { content:'⠿' }
+u2-ico[font=utf8][icon=menu]:before { content:'≡' }
+u2-ico[font=utf8][icon=list]:before { content:'≔' }
+u2-ico[font=utf8][icon=music]:before { content:'🎜' }
+
+
+
+
+
+/* ok names? compare with material-icons and report if wrong*/
+u2-ico[font=utf8][icon=arrow_right]:before { content:'▶' }
+u2-ico[font=utf8][icon=arrow_left]:before { content:'◀' }