@progress/kendo-font-icons 5.3.0 → 5.4.0

package/scss/_icon-list.scss

@@ -626,6 +626,27 @@
     .k-i-zoom-in::before { content: "\e26e"; } 
     .k-i-zoom-out::before { content: "\e26f"; } 
     .k-i-zoom-sparkle::before { content: "\e270"; } 
+    .k-i-chevron-bottom-left::before { content: "\e271"; } 
+    .k-i-chevron-bottom-right::before { content: "\e272"; } 
+    .k-i-chevron-expand::before { content: "\e273"; } 
+    .k-i-chevron-to-bottom::before { content: "\e274"; } 
+    .k-i-chevron-to-left::before { content: "\e275"; } 
+    .k-i-chevron-to-right::before { content: "\e276"; } 
+    .k-i-chevron-to-top::before { content: "\e277"; } 
+    .k-i-chevron-top-left::before { content: "\e278"; } 
+    .k-i-chevron-top-right::before { content: "\e279"; } 
+    .k-i-file-text::before { content: "\e27a"; } 
+    .k-i-margin-bottom::before { content: "\e27b"; } 
+    .k-i-margin-left::before { content: "\e27c"; } 
+    .k-i-margin-right::before { content: "\e27d"; } 
+    .k-i-margin-top::before { content: "\e27e"; } 
+    .k-i-margin::before { content: "\e27f"; } 
+    .k-i-mouse-left-click::before { content: "\e280"; } 
+    .k-i-mouse-right-click::before { content: "\e281"; } 
+    .k-i-mouse::before { content: "\e282"; } 
+    .k-i-notification::before { content: "\e283"; } 
+    .k-i-text-align-left::before { content: "\e284"; } 
+    .k-i-text-align-right::before { content: "\e285"; } 
     .k-i-checkbox-null::before { content: "\e307"; } 
     .k-i-tri-state-null::before { content: "\e307"; } 
     .k-i-image-export::before { content: "\e502"; } 

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) );
         }
     }