@progress/kendo-font-icons 4.9.3 → 4.10.0-dev.1

package/scss/_icon-list.scss

@@ -594,6 +594,7 @@
     .k-i-x-mark::before { content: "\e181"; } 
     .k-i-x-mark-sm-outline::before { content: "\e182"; } 
     .k-i-zoom-sparkle::before { content: "\e183"; } 
+    .k-i-repeat::before { content: "\e184"; } 
     .k-i-play::before { content: "\e200"; } 
     .k-i-pause::before { content: "\e201"; } 
     .k-i-stop::before { content: "\e202"; } 

package/scss/_variables.scss

@@ -5,13 +5,13 @@ $ki-icon-default-size: md !default;
 $ki-font-family: "WebComponentsIcons" !default;
 $ki-icon-size: 16px !default;
 
-$ki-icon-size-xs: calc( #{$ki-icon-size} * .75 ) !default;
-$ki-icon-size-sm: calc( #{$ki-icon-size} * .875 ) !default;
-$ki-icon-size-md: $ki-icon-size !default;
-$ki-icon-size-lg: calc( #{$ki-icon-size} * 1.25 ) !default;
-$ki-icon-size-xl: calc( #{$ki-icon-size} * 1.5 ) !default;
-$ki-icon-size-xxl: calc( #{$ki-icon-size} * 2 ) !default;
-$ki-icon-size-xxxl: calc( #{$ki-icon-size} * 3 ) !default;
+$ki-icon-size-xs: var(--kendo-icon-size-xs, calc( var(--kendo-icon-size, #{$ki-icon-size}) * .75 )) !default;
+$ki-icon-size-sm: var(--kendo-icon-size-sm, calc( var(--kendo-icon-size, #{$ki-icon-size}) * .875 )) !default;
+$ki-icon-size-md: var(--kendo-icon-size-md, var(--kendo-icon-size, #{$ki-icon-size})) !default;
+$ki-icon-size-lg: var(--kendo-icon-size-lg, calc( var(--kendo-icon-size, #{$ki-icon-size}) * 1.25 )) !default;
+$ki-icon-size-xl: var(--kendo-icon-size-xl, calc( var(--kendo-icon-size, #{$ki-icon-size}) * 1.5 )) !default;
+$ki-icon-size-xxl: var(--kendo-icon-size-xxl, calc( var(--kendo-icon-size, #{$ki-icon-size}) * 2 )) !default;
+$ki-icon-size-xxxl: var(--kendo-icon-size-xxxl, calc( var(--kendo-icon-size, #{$ki-icon-size}) * 3 )) !default;
 
 $ki-embed-font: false !default;
 $ki-font-file-url: "kendo-font-icons.ttf" !default;

package/scss/index.scss

@@ -16,6 +16,17 @@
         }
     }
 
+    :root {
+        --kendo-icon-size: #{$ki-icon-size};
+        --kendo-icon-size-xs: calc( var(--kendo-icon-size) * .75 );
+        --kendo-icon-size-sm: calc( var(--kendo-icon-size) * .875 );
+        --kendo-icon-size-md: var(--kendo-icon-size);
+        --kendo-icon-size-lg: calc( var(--kendo-icon-size) * 1.25 );
+        --kendo-icon-size-xl: calc( var(--kendo-icon-size) * 1.5 );
+        --kendo-icon-size-xxl: calc( var(--kendo-icon-size) * 2 );
+        --kendo-icon-size-xxxl: calc( var(--kendo-icon-size) * 3 );
+        --kendo-icon-rotation: 0deg;
+    }
 
     // Font icon
     .k-font-icon {
@@ -39,13 +50,14 @@
         position: relative;
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
+        transform: rotate( var(--kendo-icon-rotation) );
 
         &:hover,
         &:focus {
             text-decoration: none;
         }
 
-        // SVG Icon sizes
+        // Font Icon sizes
         @each $size, $value in $ki-icon-sizes {
             #{if($ki-icon-default-size == $size, "&,", null)}
             &.k-icon-#{$size} {
@@ -75,7 +87,8 @@
     // Rotate
     @each $index, $rotate in $ki-rotate-map {
         .k-rotate-#{$index} {
-            transform: rotate( #{$rotate} );
+            --kendo-icon-rotation: #{$rotate};
+            transform: rotate( var(--kendo-icon-rotation) );
         }
     }