@odx/icons 1.3.2 → 1.3.4

package/core/core-icons.scss

@@ -0,0 +1,993 @@
+@import "core-iconmap";
+
+@font-face {
+  font-family: odx-icon-core;
+  src: url('core-icons.eot');
+  src: url('core-icons.eot?#iefix') format('embedded-opentype'),
+  url('core-icons.woff') format('woff'),
+  url('core-icons.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 400;
+}
+
+.odx-icon {
+  display: inline-block;
+  position: relative;
+  height: 1em;
+  width: 1em;
+  transform: translate(0, 0);
+  text-rendering: auto;
+  vertical-align: middle;
+  font-size: inherit;
+  font-weight: 400;
+  line-height: 1;
+  font-style: normal;
+  font-variant: normal;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  &[data-icon-set="core"] {
+    font-family: 'odx-icon-core';
+  }
+}
+
+.odx-icon span::before {
+  z-index: 1;
+}
+
+.odx-icon span::after {
+  z-index: 2;
+}
+
+.odx-icon::before,
+.odx-icon::after,
+.odx-icon span::before,
+.odx-icon span::after {
+  display: block;
+  position: absolute;
+  white-space: normal;
+  /* undo text hidden */
+  text-indent: 0;
+  speak: none;
+}
+
+[data-icon-set="core"] {
+    &[data-icon-name="alarm"]::before {
+      content: map-get($glyphs, "alarm");
+    }
+    &[data-icon-name="alarm-a1"]::after {
+      content: map-get($glyphs, "alarm-a1-part1");
+    }
+    &[data-icon-name="alarm-a2"] span::before {
+      content: map-get($glyphs, "alarm-a2-part2");
+    }
+    &[data-icon-name="alarm-co2-off"]::before {
+      content: map-get($glyphs, "alarm-co2-off");
+    }
+    &[data-icon-name="alarm-din"]::before {
+      content: map-get($glyphs, "alarm-din");
+    }
+    &[data-icon-name="alarm-din-off"]::before {
+      content: map-get($glyphs, "alarm-din-off");
+    }
+    &[data-icon-name="alarm-din-pause"]::before {
+      content: map-get($glyphs, "alarm-din-pause");
+    }
+    &[data-icon-name="alarms-das"]::before {
+      content: map-get($glyphs, "alarms-das");
+    }
+    &[data-icon-name="alarms-das-hint"]::before {
+      content: map-get($glyphs, "alarms-das-hint");
+    }
+    &[data-icon-name="alarms-info"]::before {
+      content: map-get($glyphs, "alarms-info");
+    }
+    &[data-icon-name="alarms-off"]::before {
+      content: map-get($glyphs, "alarms-off");
+    }
+    &[data-icon-name="alarms-paused"]::before {
+      content: map-get($glyphs, "alarms-paused");
+    }
+    &[data-icon-name="alarms-per-type"]::before {
+      content: map-get($glyphs, "alarms-per-type");
+    }
+    &[data-icon-name="align-horizontal-middle"]::before {
+      content: map-get($glyphs, "align-horizontal-middle");
+    }
+    &[data-icon-name="align-vertical-middle"]::before {
+      content: map-get($glyphs, "align-vertical-middle");
+    }
+    &[data-icon-name="arrow-down"]::before {
+      content: map-get($glyphs, "arrow-down");
+    }
+    &[data-icon-name="arrow-left"]::before {
+      content: map-get($glyphs, "arrow-left");
+    }
+    &[data-icon-name="arrow-right"]::before {
+      content: map-get($glyphs, "arrow-right");
+    }
+    &[data-icon-name="arrow-up"]::before {
+      content: map-get($glyphs, "arrow-up");
+    }
+    &[data-icon-name="ascending"]::before {
+      content: map-get($glyphs, "ascending");
+    }
+    &[data-icon-name="attachment"]::before {
+      content: map-get($glyphs, "attachment");
+    }
+    &[data-icon-name="attachment-off"]::before {
+      content: map-get($glyphs, "attachment-off");
+    }
+    &[data-icon-name="battery-0"]::before {
+      content: map-get($glyphs, "battery-0");
+    }
+    &[data-icon-name="battery-100"]::before {
+      content: map-get($glyphs, "battery-100");
+    }
+    &[data-icon-name="battery-25"]::before {
+      content: map-get($glyphs, "battery-25");
+    }
+    &[data-icon-name="battery-50"]::before {
+      content: map-get($glyphs, "battery-50");
+    }
+    &[data-icon-name="battery-75"]::before {
+      content: map-get($glyphs, "battery-75");
+    }
+    &[data-icon-name="battery-alarm"]::before {
+      content: map-get($glyphs, "battery-alarm");
+    }
+    &[data-icon-name="battery-alarm"]::after {
+      content: map-get($glyphs, "battery-alarm-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="battery-alarm"] span::before {
+      content: map-get($glyphs, "battery-alarm-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="battery-charge"]::before {
+      content: map-get($glyphs, "battery-charge");
+    }
+    &[data-icon-name="battery-error"]::before {
+      content: map-get($glyphs, "battery-error");
+    }
+    &[data-icon-name="battery-error"]::after {
+      content: map-get($glyphs, "battery-error-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="battery-error"] span::before {
+      content: map-get($glyphs, "battery-error-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="battery-uncalibrated"]::before {
+      content: map-get($glyphs, "battery-uncalibrated");
+    }
+    &[data-icon-name="battery-warning"]::before {
+      content: map-get($glyphs, "battery-warning");
+    }
+    &[data-icon-name="battery-warning"]::after {
+      content: map-get($glyphs, "battery-warning-part1");
+      color: #FFE300;
+    }
+    &[data-icon-name="battery-warning"] span::before {
+      content: map-get($glyphs, "battery-warning-part2");
+      color: #002766;
+    }
+    &[data-icon-name="blocked"]::before {
+      content: map-get($glyphs, "blocked");
+    }
+    &[data-icon-name="blocked-colored"]::before {
+      content: map-get($glyphs, "blocked-colored");
+      color: #F30303;
+    }
+    &[data-icon-name="blocked-colored"]::after {
+      content: map-get($glyphs, "blocked-colored-part1");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="bluetooth"]::before {
+      content: map-get($glyphs, "bluetooth");
+    }
+    &[data-icon-name="bluetooth-off"]::before {
+      content: map-get($glyphs, "bluetooth-off");
+    }
+    &[data-icon-name="bluetooth-paired"]::before {
+      content: map-get($glyphs, "bluetooth-paired");
+    }
+    &[data-icon-name="bookmark"]::before {
+      content: map-get($glyphs, "bookmark");
+    }
+    &[data-icon-name="brightness"]::before {
+      content: map-get($glyphs, "brightness");
+    }
+    &[data-icon-name="brightness-1"]::before {
+      content: map-get($glyphs, "brightness-1");
+    }
+    &[data-icon-name="brightness-2"]::before {
+      content: map-get($glyphs, "brightness-2");
+    }
+    &[data-icon-name="brightness-3"]::before {
+      content: map-get($glyphs, "brightness-3");
+    }
+    &[data-icon-name="brightness-4"]::before {
+      content: map-get($glyphs, "brightness-4");
+    }
+    &[data-icon-name="brightness-auto"]::before {
+      content: map-get($glyphs, "brightness-auto");
+    }
+    &[data-icon-name="calendar"]::before {
+      content: map-get($glyphs, "calendar");
+    }
+    &[data-icon-name="calendar-bumptest"]::before {
+      content: map-get($glyphs, "calendar-bumptest");
+    }
+    &[data-icon-name="calendar-bumptest-error"]::before {
+      content: map-get($glyphs, "calendar-bumptest-error");
+    }
+    &[data-icon-name="calendar-bumptest-error"]::after {
+      content: map-get($glyphs, "calendar-bumptest-error-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="calendar-bumptest-error"] span::before {
+      content: map-get($glyphs, "calendar-bumptest-error-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="calendar-bumptest-warning"]::before {
+      content: map-get($glyphs, "calendar-bumptest-warning");
+    }
+    &[data-icon-name="calendar-bumptest-warning"]::after {
+      content: map-get($glyphs, "calendar-bumptest-warning-part1");
+      color: #FFE300;
+    }
+    &[data-icon-name="calendar-bumptest-warning"] span::before {
+      content: map-get($glyphs, "calendar-bumptest-warning-part2");
+      color: #002766;
+    }
+    &[data-icon-name="calendar-calibration"]::before {
+      content: map-get($glyphs, "calendar-calibration");
+    }
+    &[data-icon-name="calendar-calibration-error"]::before {
+      content: map-get($glyphs, "calendar-calibration-error");
+    }
+    &[data-icon-name="calendar-calibration-error"]::after {
+      content: map-get($glyphs, "calendar-calibration-error-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="calendar-calibration-error"] span::before {
+      content: map-get($glyphs, "calendar-calibration-error-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="calendar-calibration-warning"]::before {
+      content: map-get($glyphs, "calendar-calibration-warning");
+    }
+    &[data-icon-name="calendar-calibration-warning"]::after {
+      content: map-get($glyphs, "calendar-calibration-warning-part1");
+      color: #FFE300;
+    }
+    &[data-icon-name="calendar-calibration-warning"] span::before {
+      content: map-get($glyphs, "calendar-calibration-warning-part2");
+      color: #002766;
+    }
+    &[data-icon-name="calendar-day-view"]::before {
+      content: map-get($glyphs, "calendar-day-view");
+    }
+    &[data-icon-name="calendar-event"]::before {
+      content: map-get($glyphs, "calendar-event");
+    }
+    &[data-icon-name="calendar-flag"]::before {
+      content: map-get($glyphs, "calendar-flag");
+    }
+    &[data-icon-name="calendar-flag"]::after {
+      content: map-get($glyphs, "calendar-flag-part1");
+      color: #FFE300;
+    }
+    &[data-icon-name="calendar-interval"]::before {
+      content: map-get($glyphs, "calendar-interval");
+    }
+    &[data-icon-name="calendar-list"]::before {
+      content: map-get($glyphs, "calendar-list");
+    }
+    &[data-icon-name="calendar-time"]::before {
+      content: map-get($glyphs, "calendar-time");
+    }
+    &[data-icon-name="calendar-user"]::before {
+      content: map-get($glyphs, "calendar-user");
+    }
+    &[data-icon-name="calendar-user-error"]::before {
+      content: map-get($glyphs, "calendar-user-error");
+    }
+    &[data-icon-name="calendar-user-error"]::after {
+      content: map-get($glyphs, "calendar-user-error-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="calendar-user-error"] span::before {
+      content: map-get($glyphs, "calendar-user-error-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="calendar-user-warning"]::before {
+      content: map-get($glyphs, "calendar-user-warning");
+    }
+    &[data-icon-name="calendar-user-warning"]::after {
+      content: map-get($glyphs, "calendar-user-warning-part1");
+      color: #FFE300;
+    }
+    &[data-icon-name="calendar-user-warning"] span::before {
+      content: map-get($glyphs, "calendar-user-warning-part2");
+      color: #002766;
+    }
+    &[data-icon-name="calendar-week-view"]::before {
+      content: map-get($glyphs, "calendar-week-view");
+    }
+    &[data-icon-name="camera"]::before {
+      content: map-get($glyphs, "camera");
+    }
+    &[data-icon-name="check"]::before {
+      content: map-get($glyphs, "check");
+    }
+    &[data-icon-name="check-colored"]::before {
+      content: map-get($glyphs, "check-colored");
+      color: #00DD31;
+    }
+    &[data-icon-name="check-colored"]::after {
+      content: map-get($glyphs, "check-colored-part1");
+      color: #002766;
+    }
+    &[data-icon-name="chevron-down"]::before {
+      content: map-get($glyphs, "chevron-down");
+    }
+    &[data-icon-name="chevron-left"]::before {
+      content: map-get($glyphs, "chevron-left");
+    }
+    &[data-icon-name="chevron-right"]::before {
+      content: map-get($glyphs, "chevron-right");
+    }
+    &[data-icon-name="chevron-up"]::before {
+      content: map-get($glyphs, "chevron-up");
+    }
+    &[data-icon-name="close"]::before {
+      content: map-get($glyphs, "close");
+    }
+    &[data-icon-name="cloud"]::before {
+      content: map-get($glyphs, "cloud");
+    }
+    &[data-icon-name="cloud-error"]::before {
+      content: map-get($glyphs, "cloud-error");
+    }
+    &[data-icon-name="cloud-error"]::after {
+      content: map-get($glyphs, "cloud-error-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="cloud-error"] span::before {
+      content: map-get($glyphs, "cloud-error-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="cloud-ok"]::before {
+      content: map-get($glyphs, "cloud-ok");
+    }
+    &[data-icon-name="cloud-ok"]::after {
+      content: map-get($glyphs, "cloud-ok-part1");
+      color: #00DD31;
+    }
+    &[data-icon-name="cloud-ok"] span::before {
+      content: map-get($glyphs, "cloud-ok-part2");
+      color: #002766;
+    }
+    &[data-icon-name="cloud-upload"]::before {
+      content: map-get($glyphs, "cloud-upload");
+    }
+    &[data-icon-name="cloud-warning"]::before {
+      content: map-get($glyphs, "cloud-warning");
+    }
+    &[data-icon-name="cloud-warning"]::after {
+      content: map-get($glyphs, "cloud-warning-part1");
+      color: #FFE300;
+    }
+    &[data-icon-name="cloud-warning"] span::before {
+      content: map-get($glyphs, "cloud-warning-part2");
+      color: #002766;
+    }
+    &[data-icon-name="comment"]::before {
+      content: map-get($glyphs, "comment");
+    }
+    &[data-icon-name="compare"]::before {
+      content: map-get($glyphs, "compare");
+    }
+    &[data-icon-name="config"]::before {
+      content: map-get($glyphs, "config");
+    }
+    &[data-icon-name="config-edit"]::before {
+      content: map-get($glyphs, "config-edit");
+    }
+    &[data-icon-name="config-enter"]::before {
+      content: map-get($glyphs, "config-enter");
+    }
+    &[data-icon-name="config-leave"]::before {
+      content: map-get($glyphs, "config-leave");
+    }
+    &[data-icon-name="config-update"]::before {
+      content: map-get($glyphs, "config-update");
+    }
+    &[data-icon-name="config-view"]::before {
+      content: map-get($glyphs, "config-view");
+    }
+    &[data-icon-name="copy-content"]::before {
+      content: map-get($glyphs, "copy-content");
+    }
+    &[data-icon-name="copy-file"]::before {
+      content: map-get($glyphs, "copy-file");
+    }
+    &[data-icon-name="copy-folder"]::before {
+      content: map-get($glyphs, "copy-folder");
+    }
+    &[data-icon-name="cut"]::before {
+      content: map-get($glyphs, "cut");
+    }
+    &[data-icon-name="delete"]::before {
+      content: map-get($glyphs, "delete");
+    }
+    &[data-icon-name="descending"]::before {
+      content: map-get($glyphs, "descending");
+    }
+    &[data-icon-name="document"]::before {
+      content: map-get($glyphs, "document");
+    }
+    &[data-icon-name="document-check"]::before {
+      content: map-get($glyphs, "document-check");
+    }
+    &[data-icon-name="document-flag"]::before {
+      content: map-get($glyphs, "document-flag");
+    }
+    &[data-icon-name="document-flag"]::after {
+      content: map-get($glyphs, "document-flag-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="document-settings"]::before {
+      content: map-get($glyphs, "document-settings");
+    }
+    &[data-icon-name="download"]::before {
+      content: map-get($glyphs, "download");
+    }
+    &[data-icon-name="edit"]::before {
+      content: map-get($glyphs, "edit");
+    }
+    &[data-icon-name="emoji-happy"]::before {
+      content: map-get($glyphs, "emoji-happy");
+    }
+    &[data-icon-name="emoji-neutral"]::before {
+      content: map-get($glyphs, "emoji-neutral");
+    }
+    &[data-icon-name="emoji-sad"]::before {
+      content: map-get($glyphs, "emoji-sad");
+    }
+    &[data-icon-name="error"]::before {
+      content: map-get($glyphs, "error");
+    }
+    &[data-icon-name="error-colored"]::before {
+      content: map-get($glyphs, "error-colored");
+      color: #F30303;
+    }
+    &[data-icon-name="error-colored"]::after {
+      content: map-get($glyphs, "error-colored-part1");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="export"]::before {
+      content: map-get($glyphs, "export");
+    }
+    &[data-icon-name="favorite"]::before {
+      content: map-get($glyphs, "favorite");
+    }
+    &[data-icon-name="favorite-solid"]::before {
+      content: map-get($glyphs, "favorite-solid");
+    }
+    &[data-icon-name="feedback-warning"]::before {
+      content: map-get($glyphs, "feedback-warning");
+    }
+    &[data-icon-name="feedback-warning-color"]::before {
+      content: map-get($glyphs, "feedback-warning-color");
+      color: #FFE300;
+    }
+    &[data-icon-name="feedback-warning-color"]::after {
+      content: map-get($glyphs, "feedback-warning-color-part1");
+      color: #002766;
+    }
+    &[data-icon-name="file"]::before {
+      content: map-get($glyphs, "file");
+    }
+    &[data-icon-name="file-excel"]::before {
+      content: map-get($glyphs, "file-excel");
+    }
+    &[data-icon-name="file-pdf"]::before {
+      content: map-get($glyphs, "file-pdf");
+    }
+    &[data-icon-name="file-ppt"]::before {
+      content: map-get($glyphs, "file-ppt");
+    }
+    &[data-icon-name="file-word"]::before {
+      content: map-get($glyphs, "file-word");
+    }
+    &[data-icon-name="file-zip"]::before {
+      content: map-get($glyphs, "file-zip");
+    }
+    &[data-icon-name="filter"]::before {
+      content: map-get($glyphs, "filter");
+    }
+    &[data-icon-name="filter-close"]::before {
+      content: map-get($glyphs, "filter-close");
+    }
+    &[data-icon-name="filter-settings"]::before {
+      content: map-get($glyphs, "filter-settings");
+    }
+    &[data-icon-name="flag"]::before {
+      content: map-get($glyphs, "flag");
+    }
+    &[data-icon-name="folder"]::before {
+      content: map-get($glyphs, "folder");
+    }
+    &[data-icon-name="folder-open"]::before {
+      content: map-get($glyphs, "folder-open");
+    }
+    &[data-icon-name="gender-female"]::before {
+      content: map-get($glyphs, "gender-female");
+    }
+    &[data-icon-name="gender-male"]::before {
+      content: map-get($glyphs, "gender-male");
+    }
+    &[data-icon-name="help"]::before {
+      content: map-get($glyphs, "help");
+    }
+    &[data-icon-name="import"]::before {
+      content: map-get($glyphs, "import");
+    }
+    &[data-icon-name="info"]::before {
+      content: map-get($glyphs, "info");
+    }
+    &[data-icon-name="language"]::before {
+      content: map-get($glyphs, "language");
+    }
+    &[data-icon-name="link-external"]::before {
+      content: map-get($glyphs, "link-external");
+    }
+    &[data-icon-name="link-internal"]::before {
+      content: map-get($glyphs, "link-internal");
+    }
+    &[data-icon-name="location"]::before {
+      content: map-get($glyphs, "location");
+    }
+    &[data-icon-name="location-measure"]::before {
+      content: map-get($glyphs, "location-measure");
+    }
+    &[data-icon-name="location-off"]::before {
+      content: map-get($glyphs, "location-off");
+    }
+    &[data-icon-name="location-scan"]::before {
+      content: map-get($glyphs, "location-scan");
+    }
+    &[data-icon-name="lock"]::before {
+      content: map-get($glyphs, "lock");
+    }
+    &[data-icon-name="logout"]::before {
+      content: map-get($glyphs, "logout");
+    }
+    &[data-icon-name="mail"]::before {
+      content: map-get($glyphs, "mail");
+    }
+    &[data-icon-name="mail-error"]::before {
+      content: map-get($glyphs, "mail-error");
+    }
+    &[data-icon-name="mail-error"]::after {
+      content: map-get($glyphs, "mail-error-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="mail-error"] span::before {
+      content: map-get($glyphs, "mail-error-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="mail-newsletter"]::before {
+      content: map-get($glyphs, "mail-newsletter");
+    }
+    &[data-icon-name="mail-resend"]::before {
+      content: map-get($glyphs, "mail-resend");
+    }
+    &[data-icon-name="mail-send"]::before {
+      content: map-get($glyphs, "mail-send");
+    }
+    &[data-icon-name="mail-sending"]::before {
+      content: map-get($glyphs, "mail-sending");
+    }
+    &[data-icon-name="mail-success"]::before {
+      content: map-get($glyphs, "mail-success");
+    }
+    &[data-icon-name="mail-success"]::after {
+      content: map-get($glyphs, "mail-success-part1");
+      color: #00DD31;
+    }
+    &[data-icon-name="mail-success"] span::before {
+      content: map-get($glyphs, "mail-success-part2");
+      color: #002766;
+    }
+    &[data-icon-name="map"]::before {
+      content: map-get($glyphs, "map");
+    }
+    &[data-icon-name="maximize"]::before {
+      content: map-get($glyphs, "maximize");
+    }
+    &[data-icon-name="media-back"]::before {
+      content: map-get($glyphs, "media-back");
+    }
+    &[data-icon-name="media-fastforward"]::before {
+      content: map-get($glyphs, "media-fastforward");
+    }
+    &[data-icon-name="media-pause"]::before {
+      content: map-get($glyphs, "media-pause");
+    }
+    &[data-icon-name="media-play"]::before {
+      content: map-get($glyphs, "media-play");
+    }
+    &[data-icon-name="media-rewind"]::before {
+      content: map-get($glyphs, "media-rewind");
+    }
+    &[data-icon-name="media-skip"]::before {
+      content: map-get($glyphs, "media-skip");
+    }
+    &[data-icon-name="media-stop"]::before {
+      content: map-get($glyphs, "media-stop");
+    }
+    &[data-icon-name="menu"]::before {
+      content: map-get($glyphs, "menu");
+    }
+    &[data-icon-name="minimize"]::before {
+      content: map-get($glyphs, "minimize");
+    }
+    &[data-icon-name="minus"]::before {
+      content: map-get($glyphs, "minus");
+    }
+    &[data-icon-name="mode-switch"]::before {
+      content: map-get($glyphs, "mode-switch");
+    }
+    &[data-icon-name="more"]::before {
+      content: map-get($glyphs, "more");
+    }
+    &[data-icon-name="next"]::before {
+      content: map-get($glyphs, "next");
+    }
+    &[data-icon-name="night-mode"]::before {
+      content: map-get($glyphs, "night-mode");
+    }
+    &[data-icon-name="notification"]::before {
+      content: map-get($glyphs, "notification");
+    }
+    &[data-icon-name="notification-off"]::before {
+      content: map-get($glyphs, "notification-off");
+    }
+    &[data-icon-name="on-off"]::before {
+      content: map-get($glyphs, "on-off");
+    }
+    &[data-icon-name="package"]::before {
+      content: map-get($glyphs, "package");
+    }
+    &[data-icon-name="password"]::before {
+      content: map-get($glyphs, "password");
+    }
+    &[data-icon-name="phone"]::before {
+      content: map-get($glyphs, "phone");
+    }
+    &[data-icon-name="picture"]::before {
+      content: map-get($glyphs, "picture");
+    }
+    &[data-icon-name="pin"]::before {
+      content: map-get($glyphs, "pin");
+    }
+    &[data-icon-name="placeholder"]::before {
+      content: map-get($glyphs, "placeholder");
+    }
+    &[data-icon-name="plus"]::before {
+      content: map-get($glyphs, "plus");
+    }
+    &[data-icon-name="position"]::before {
+      content: map-get($glyphs, "position");
+    }
+    &[data-icon-name="position-off"]::before {
+      content: map-get($glyphs, "position-off");
+    }
+    &[data-icon-name="previous"]::before {
+      content: map-get($glyphs, "previous");
+    }
+    &[data-icon-name="print"]::before {
+      content: map-get($glyphs, "print");
+    }
+    &[data-icon-name="print-config"]::before {
+      content: map-get($glyphs, "print-config");
+    }
+    &[data-icon-name="print-error"]::before {
+      content: map-get($glyphs, "print-error");
+    }
+    &[data-icon-name="print-error"]::after {
+      content: map-get($glyphs, "print-error-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="print-error"] span::before {
+      content: map-get($glyphs, "print-error-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="print-preview"]::before {
+      content: map-get($glyphs, "print-preview");
+    }
+    &[data-icon-name="print-selection"]::before {
+      content: map-get($glyphs, "print-selection");
+    }
+    &[data-icon-name="print-success"]::before {
+      content: map-get($glyphs, "print-success");
+    }
+    &[data-icon-name="print-success"]::after {
+      content: map-get($glyphs, "print-success-part1");
+      color: #00DD31;
+    }
+    &[data-icon-name="print-success"] span::before {
+      content: map-get($glyphs, "print-success-part2");
+      color: #002766;
+    }
+    &[data-icon-name="print-warning"]::before {
+      content: map-get($glyphs, "print-warning");
+    }
+    &[data-icon-name="print-warning"]::after {
+      content: map-get($glyphs, "print-warning-part1");
+      color: #FFE300;
+    }
+    &[data-icon-name="print-warning"] span::before {
+      content: map-get($glyphs, "print-warning-part2");
+      color: #002766;
+    }
+    &[data-icon-name="redo"]::before {
+      content: map-get($glyphs, "redo");
+    }
+    &[data-icon-name="reload"]::before {
+      content: map-get($glyphs, "reload");
+    }
+    &[data-icon-name="reload-off"]::before {
+      content: map-get($glyphs, "reload-off");
+    }
+    &[data-icon-name="reload-required"]::before {
+      content: map-get($glyphs, "reload-required");
+    }
+    &[data-icon-name="reset"]::before {
+      content: map-get($glyphs, "reset");
+    }
+    &[data-icon-name="save"]::before {
+      content: map-get($glyphs, "save");
+    }
+    &[data-icon-name="save-as"]::before {
+      content: map-get($glyphs, "save-as");
+    }
+    &[data-icon-name="search"]::before {
+      content: map-get($glyphs, "search");
+    }
+    &[data-icon-name="search-activate"]::before {
+      content: map-get($glyphs, "search-activate");
+    }
+    &[data-icon-name="search-close"]::before {
+      content: map-get($glyphs, "search-close");
+    }
+    &[data-icon-name="search-config"]::before {
+      content: map-get($glyphs, "search-config");
+    }
+    &[data-icon-name="search-next"]::before {
+      content: map-get($glyphs, "search-next");
+    }
+    &[data-icon-name="search-previous"]::before {
+      content: map-get($glyphs, "search-previous");
+    }
+    &[data-icon-name="search-save"]::before {
+      content: map-get($glyphs, "search-save");
+    }
+    &[data-icon-name="searching"]::before {
+      content: map-get($glyphs, "searching");
+    }
+    &[data-icon-name="searching-1"]::before {
+      content: map-get($glyphs, "searching-1");
+    }
+    &[data-icon-name="searching-2"]::before {
+      content: map-get($glyphs, "searching-2");
+    }
+    &[data-icon-name="searching-3"]::before {
+      content: map-get($glyphs, "searching-3");
+    }
+    &[data-icon-name="service"]::before {
+      content: map-get($glyphs, "service");
+    }
+    &[data-icon-name="settings"]::before {
+      content: map-get($glyphs, "settings");
+    }
+    &[data-icon-name="settings-add"]::before {
+      content: map-get($glyphs, "settings-add");
+    }
+    &[data-icon-name="settings-edit"]::before {
+      content: map-get($glyphs, "settings-edit");
+    }
+    &[data-icon-name="settings-enter"]::before {
+      content: map-get($glyphs, "settings-enter");
+    }
+    &[data-icon-name="settings-leave"]::before {
+      content: map-get($glyphs, "settings-leave");
+    }
+    &[data-icon-name="settings-remove"]::before {
+      content: map-get($glyphs, "settings-remove");
+    }
+    &[data-icon-name="settings-reset"]::before {
+      content: map-get($glyphs, "settings-reset");
+    }
+    &[data-icon-name="share"]::before {
+      content: map-get($glyphs, "share");
+    }
+    &[data-icon-name="shoppingcart"]::before {
+      content: map-get($glyphs, "shoppingcart");
+    }
+    &[data-icon-name="standby"]::before {
+      content: map-get($glyphs, "standby");
+    }
+    &[data-icon-name="sync"]::before {
+      content: map-get($glyphs, "sync");
+    }
+    &[data-icon-name="sync-off"]::before {
+      content: map-get($glyphs, "sync-off");
+    }
+    &[data-icon-name="sync-off-success"]::before {
+      content: map-get($glyphs, "sync-off-success");
+    }
+    &[data-icon-name="sync-off-success"]::after {
+      content: map-get($glyphs, "sync-off-success-part1");
+      color: #00DD31;
+    }
+    &[data-icon-name="sync-off-success"] span::before {
+      content: map-get($glyphs, "sync-off-success-part2");
+      color: #002766;
+    }
+    &[data-icon-name="sync-success"]::before {
+      content: map-get($glyphs, "sync-success");
+    }
+    &[data-icon-name="sync-success"]::after {
+      content: map-get($glyphs, "sync-success-part1");
+      color: #00DD31;
+    }
+    &[data-icon-name="sync-success"] span::before {
+      content: map-get($glyphs, "sync-success-part2");
+      color: #002766;
+    }
+    &[data-icon-name="tile-menu"]::before {
+      content: map-get($glyphs, "tile-menu");
+    }
+    &[data-icon-name="training"]::before {
+      content: map-get($glyphs, "training");
+    }
+    &[data-icon-name="undo"]::before {
+      content: map-get($glyphs, "undo");
+    }
+    &[data-icon-name="unlock"]::before {
+      content: map-get($glyphs, "unlock");
+    }
+    &[data-icon-name="upload"]::before {
+      content: map-get($glyphs, "upload");
+    }
+    &[data-icon-name="user"]::before {
+      content: map-get($glyphs, "user");
+    }
+    &[data-icon-name="user-administration"]::before {
+      content: map-get($glyphs, "user-administration");
+    }
+    &[data-icon-name="user-administrator"]::before {
+      content: map-get($glyphs, "user-administrator");
+    }
+    &[data-icon-name="user-edit"]::before {
+      content: map-get($glyphs, "user-edit");
+    }
+    &[data-icon-name="user-engineer"]::before {
+      content: map-get($glyphs, "user-engineer");
+    }
+    &[data-icon-name="user-group"]::before {
+      content: map-get($glyphs, "user-group");
+    }
+    &[data-icon-name="user-group-administration"]::before {
+      content: map-get($glyphs, "user-group-administration");
+    }
+    &[data-icon-name="user-id"]::before {
+      content: map-get($glyphs, "user-id");
+    }
+    &[data-icon-name="user-id-error"]::before {
+      content: map-get($glyphs, "user-id-error");
+    }
+    &[data-icon-name="user-id-error"]::after {
+      content: map-get($glyphs, "user-id-error-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="user-id-error"] span::before {
+      content: map-get($glyphs, "user-id-error-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="user-id-invalid"]::before {
+      content: map-get($glyphs, "user-id-invalid");
+    }
+    &[data-icon-name="user-id-invalid"]::after {
+      content: map-get($glyphs, "user-id-invalid-part1");
+      color: #F30303;
+    }
+    &[data-icon-name="user-id-invalid"] span::before {
+      content: map-get($glyphs, "user-id-invalid-part2");
+      color: #FFFFFF;
+    }
+    &[data-icon-name="user-id-query"]::before {
+      content: map-get($glyphs, "user-id-query");
+    }
+    &[data-icon-name="user-id-reading"]::before {
+      content: map-get($glyphs, "user-id-reading");
+    }
+    &[data-icon-name="user-id-success"]::before {
+      content: map-get($glyphs, "user-id-success");
+    }
+    &[data-icon-name="user-id-success"]::after {
+      content: map-get($glyphs, "user-id-success-part1");
+      color: #00DD31;
+    }
+    &[data-icon-name="user-id-success"] span::before {
+      content: map-get($glyphs, "user-id-success-part2");
+      color: #002766;
+    }
+    &[data-icon-name="user-level-1"]::before {
+      content: map-get($glyphs, "user-level-1");
+    }
+    &[data-icon-name="user-level-2"]::before {
+      content: map-get($glyphs, "user-level-2");
+    }
+    &[data-icon-name="user-level-3"]::before {
+      content: map-get($glyphs, "user-level-3");
+    }
+    &[data-icon-name="user-level-4"]::before {
+      content: map-get($glyphs, "user-level-4");
+    }
+    &[data-icon-name="user-level-5"]::before {
+      content: map-get($glyphs, "user-level-5");
+    }
+    &[data-icon-name="user-logout"]::before {
+      content: map-get($glyphs, "user-logout");
+    }
+    &[data-icon-name="user-maintainer"]::before {
+      content: map-get($glyphs, "user-maintainer");
+    }
+    &[data-icon-name="user-operator"]::before {
+      content: map-get($glyphs, "user-operator");
+    }
+    &[data-icon-name="user-trainer"]::before {
+      content: map-get($glyphs, "user-trainer");
+    }
+    &[data-icon-name="user-worker"]::before {
+      content: map-get($glyphs, "user-worker");
+    }
+    &[data-icon-name="video"]::before {
+      content: map-get($glyphs, "video");
+    }
+    &[data-icon-name="view"]::before {
+      content: map-get($glyphs, "view");
+    }
+    &[data-icon-name="visual-inspection"]::before {
+      content: map-get($glyphs, "visual-inspection");
+    }
+    &[data-icon-name="warning"]::before {
+      content: map-get($glyphs, "warning");
+    }
+    &[data-icon-name="warning-colored"]::before {
+      content: map-get($glyphs, "warning-colored");
+      color: #FFE300;
+    }
+    &[data-icon-name="warning-colored"]::after {
+      content: map-get($glyphs, "warning-colored-part1");
+      color: #002766;
+    }
+    &[data-icon-name="zoom-in"]::before {
+      content: map-get($glyphs, "zoom-in");
+    }
+    &[data-icon-name="zoom-original"]::before {
+      content: map-get($glyphs, "zoom-original");
+    }
+    &[data-icon-name="zoom-out"]::before {
+      content: map-get($glyphs, "zoom-out");
+    }
+    &[data-icon-name="zoom-window"]::before {
+      content: map-get($glyphs, "zoom-window");
+    }
+}