CSS for custom icons

Signed-off-by: Daniel Kastl <[email protected]>

Author: dkastl

src/components/gtt-setting.ts

@@ -11,11 +11,23 @@ export const gtt_setting = ():void => {
       const wrapper = $('<div>', {
         text: ''
       })
-      $('<i>', {
-        class: "ui-icons " + item.optgroup.toLowerCase().split(' ').join('-'),
-        title: item.label,
-        text: item.value
-      }).prependTo(wrapper)
+      const style = item.optgroup.toLowerCase().split(' ').join('-')
+      switch (style) {
+        case 'material-icons':
+          $('<i>', {
+            class: "ui-icons " + style,
+            title: item.label,
+            text: item.value
+          }).prependTo(wrapper)
+          break;
+
+        default:
+          $('<i>', {
+            class: "ui-icons icon-" + item.value,
+            title: item.label
+          }).prependTo(wrapper)
+          break;
+      }
       return li.append(wrapper).appendTo(ul)
     }
   });
@@ -39,8 +51,17 @@ export const gtt_setting = ():void => {
           }).join(' ')
           optgroup.appendChild(new Option(text, i, selected, selected))
           if (selected) {
-            element.nextElementSibling.className = font.toLowerCase().split(' ').join('-')
-            element.nextElementSibling.textContent = i
+            const style = font.toLowerCase().split(' ').join('-')
+            switch (style) {
+              case 'material-icons':
+                element.nextElementSibling.className = style
+                element.nextElementSibling.textContent = i
+                break;
+
+              default:
+                element.nextElementSibling.className = "icon-" + i
+                break;
+            }
           }
         }
       }
@@ -51,8 +72,17 @@ export const gtt_setting = ():void => {
     $(element)
       .selectmenu({
         change: function(event: any, data: any) {
-          document.querySelector(`#icon_${element.id}`).className = data.item.optgroup.toLowerCase().split(' ').join('-')
-          document.querySelector(`#icon_${element.id}`).textContent = data.item.value
+          const style = data.item.optgroup.toLowerCase().split(' ').join('-')
+          switch (style) {
+            case 'material-icons':
+              document.querySelector(`#icon_${element.id}`).className = style
+              document.querySelector(`#icon_${element.id}`).textContent = data.item.value
+              break;
+
+            default:
+              document.querySelector(`#icon_${element.id}`).className = 'icon-' + data.item.value
+              break;
+          }
         }
       })
       .selectmenu('menuWidget')

src/stylesheets/custom-icons.css

@@ -1,14 +1,16 @@
 @font-face {
-  font-family: "Custom Icons";
+  font-family: "custom-icons";
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./custom-icons.woff2") format("woff2");
+  src: url("./custom-icons.woff2?1109fa2dad74e02707a8301474f34d5d") format("woff2");
 }
-.custom-icons {
-  font-family: "Custom Icons";
-  font-weight: normal;
+
+i[class^="icon-"]:before, i[class*=" icon-"]:before {
+  font-family: custom-icons !important;
   font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
@@ -23,31 +25,15 @@
   font-feature-settings: "liga";
 }
 
-/* @font-face {
-  font-family: "custom-icons";
-  src: url("./custom-icons.woff2?1109fa2dad74e02707a8301474f34d5d") format("woff2");
-}
-
-i[class^="icon-"]:before, i[class*=" icon-"]:before {
-  font-family: custom-icons !important;
-  font-style: normal;
-  font-weight: normal !important;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 .icon-lobsta:before {
   content: "\f101";
 }
-.icon-park_bench:before {
+.icon-park-bench:before {
   content: "\f102";
 }
 .icon-road:before {
   content: "\f103";
 }
 .icon-waste:before {
   content: "\f104";
-} */
+}