@progress/kendo-theme-default 5.12.1-dev.3 → 5.12.1-dev.4

package/dist/all.scss

@@ -8507,6 +8507,11 @@ $ki-rotate-map: (
         }
     }
 
+    // kendo-icon-wrapper component
+    .k-icon-wrapper-host {
+        display: contents;
+    }
+
     .k-icon-with-modifier {
         position: relative;
         margin: .25em;
@@ -13273,6 +13278,45 @@ $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
             > .k-button-icon {
                 min-width: calc( #{$_font-size} * #{$_line-height} );
                 min-height: calc( #{$_font-size} * #{$_line-height} );
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+
+                &.k-svg-icon > svg,
+                &.k-icon-md > svg {
+                    width: $kendo-icon-size-md;
+                    height: $kendo-icon-size-md;
+                }
+
+                &.k-icon-xs > svg {
+                    width: $kendo-icon-size-xs;
+                    height: $kendo-icon-size-xs;
+                }
+
+                &.k-icon-sm > svg {
+                    width: $kendo-icon-size-sm;
+                    height: $kendo-icon-size-sm;
+                }
+
+                &.k-icon-lg > svg {
+                    width: $kendo-icon-size-lg;
+                    height: $kendo-icon-size-lg;
+                }
+
+                &.k-icon-xl > svg {
+                    width: $kendo-icon-size-xl;
+                    height: $kendo-icon-size-xl;
+                }
+
+                &.k-icon-xxl > svg {
+                    width: $kendo-icon-size-xxl;
+                    height: $kendo-icon-size-xxl;
+                }
+
+                &.k-icon-xxxl > svg {
+                    width: $kendo-icon-size-xxxl;
+                    height: $kendo-icon-size-xxxl;
+                }
             }
         }
     }
@@ -16475,7 +16519,7 @@ $kendo-form-sizes: (
             position: relative;
             aspect-ratio: auto;
 
-            > .k-button-icon {
+            .k-button-icon {
                 margin: -1em 0;
                 min-width: auto !important; // sass-lint:disable-line no-important
                 min-height: auto !important; // sass-lint:disable-line no-important
@@ -21137,8 +21181,9 @@ $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer,
             }
 
             // Needed for the double check icons
-            .k-icon + .k-icon {
-                margin-left: -13px;
+            .k-icon + .k-icon,
+            .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
+                margin-inline-start: -13px;
             }
         }
     }
@@ -21152,19 +21197,6 @@ $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer,
 
 }
 
-@include exports( "colorgradient/layout/rtl" ) {
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        .k-colorgradient-color-contrast .k-i-check + .k-i-check {
-            margin-left: 0;
-            margin-right: -13px;
-        }
-
-    }
-
-}
 
 // #endregion
 // #region @import "./_theme.scss"; -> packages/default/scss/colorgradient/_theme.scss
@@ -31485,6 +31517,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         }
 
         .k-table-th,
+        td,
         .k-table-td {
             border-width: 0;
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
@@ -31523,6 +31556,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             white-space: nowrap;
         }
 
+        td,
         .k-table-td {
             border-block-end-width: $kendo-grid-cell-horizontal-border-width;
             white-space: unset;
@@ -31679,12 +31713,17 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             align-items: center;
             align-content: center;
         }
+
+        .k-grouping-row td,
         .k-grouping-row .k-table-td {
             overflow: visible;
         }
+
+        .k-grouping-row + .k-table-row td,
         .k-grouping-row + .k-table-row .k-table-td {
             border-top-width: $kendo-grid-grouping-row-border-top;
         }
+
         .k-grouping-row .k-group-cell,
         .k-grouping-row + .k-table-row .k-group-cell {
             border-top-width: 0;
@@ -31697,11 +31736,13 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             text-decoration: none;
         }
 
+        .k-table .k-group-footer td,
         .k-table .k-group-footer .k-table-td {
             border-style: solid;
             border-width: $kendo-grid-group-footer-border-y 0;
         }
 
+        .k-group-footer .k-group-cell + td,
         .k-group-footer .k-group-cell + .k-table-td {
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
@@ -31906,11 +31947,15 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     .k-grid-footer {
         border-top-width: 1px;
 
+        td,
         .k-table-td {
             height: $kendo-line-height-em;
         }
     }
 
+    .k-grid-footer td,
+    .k-group-footer td,
+    .k-grouping-row td,
     .k-grid-footer .k-table-td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td {
@@ -31933,6 +31978,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     .k-filter-row {
         line-height: $kendo-form-line-height;
 
+        td,
         .k-table-td,
         .k-table-th {
             border-width: 0;
@@ -31941,6 +31987,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             white-space: nowrap;
         }
 
+        td:first-child,
         .k-table-td:first-child {
             border-inline-start-width: 0;
         }
@@ -31987,6 +32034,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         border-color: inherit;
         outline: 0;
 
+        .k-table-row:last-child > td,
         .k-table-row:last-child > .k-table-td {
             border-bottom-width: 0;
         }
@@ -32012,11 +32060,13 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     // Edit row
     .k-grid .k-edit-cell,
     .k-grid .k-command-cell,
+    .k-grid .k-grid-edit-row td,
     .k-grid .k-grid-edit-row .k-table-td {
         text-overflow: clip;
     }
 
     .k-grid .k-edit-cell,
+    .k-grid .k-grid-edit-row td,
     .k-grid .k-grid-edit-row .k-table-td {
 
         > input:not([type="checkbox"]):not([type="radio"]),
@@ -32073,19 +32123,19 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
-            float: inline-start;
+            float: left;
             width: 100%;
         }
 
         .k-grid-table {
             position: relative;
-            float: inline-start;
+            float: left;
             z-index: 1;
         }
 
         > .k-height-container {
             position: relative;
-            float: inline-start;
+            float: left;
         }
 
         &::after {
@@ -32104,6 +32154,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         height: 1px;
     }
 
+    .k-grid-add-row td,
     .k-grid-add-row .k-table-td {
         border-bottom-style: solid;
         border-bottom-width: 1px;
@@ -32179,6 +32230,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             z-index: auto;
         }
 
+        .k-grid-row-sticky td,
         .k-grid-row-sticky .k-table-td {
             border-bottom-width: $kendo-grid-border-width;
             border-top-width: $kendo-grid-border-width;
@@ -32186,12 +32238,11 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             position: sticky;
             top: inherit;
             bottom: inherit;
-        }
-
-        .k-grid-row-sticky .k-table-td {
             z-index: 2;
         }
 
+        .k-grid-row-sticky td.k-grid-content-sticky,
+        .k-grid-row-sticky.k-alt td.k-grid-content-sticky,
         .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
         .k-grid-row-sticky.k-alt .k-table-td.k-grid-content-sticky {
             z-index: 3;
@@ -32218,6 +32269,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     .k-grid .k-table .k-grid-footer-sticky {
         border-inline-end-width: $kendo-grid-cell-vertical-border-width;
 
+        &:not([style*="display: none"]) + td,
         &:not([style*="display: none"]) + .k-table-td,
         &:not([style*="display: none"]) + .k-table-th {
             border-inline-start-width: 0;
@@ -32303,6 +32355,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
                 padding: $_header-padding-y $_header-padding-x;
             }
 
+            td,
             .k-table-td {
                 padding: $_cell-padding-y $_cell-padding-x;
             }
@@ -32364,6 +32417,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             // Edit row
             .k-edit-cell,
             .k-command-cell,
+            .k-grid-edit-row td,
             .k-grid-edit-row .k-table-td {
                 padding: $_edit-cell-padding-y $_edit-cell-padding-x;
             }
@@ -32371,6 +32425,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 
             // Filter row
             .k-filter-row {
+                td,
                 .k-table-td,
                 .k-table-th {
                     padding: $_filter-cell-padding-y $_filter-cell-padding-x;
@@ -32433,7 +32488,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     // Remove Grid scrollbar during built-in export
     .k-pdf-export-shadow {
         .k-grid {
-            float: inline-start;
+            float: left;
             width: auto !important; // sass-lint:disable-line no-important
         }
 
@@ -32541,6 +32596,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         table-layout: auto !important;
 
         .k-table-th,
+        td,
         .k-table-td {
             white-space: nowrap !important;
         }
@@ -32669,6 +32725,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     .k-grid-header-wrap,
     .k-grouping-header,
     .k-grid .k-table-th,
+    .k-grid td,
     .k-grid .k-table-td,
     .k-grid-footer,
     .k-grid-footer-wrap,
@@ -32676,6 +32733,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     .k-grid-footer-locked,
     .k-grid-header-locked,
     .k-filter-row > .k-table-th,
+    .k-filter-row > td,
     .k-filter-row > .k-table-td {
         @include fill( $border: $kendo-grid-header-border );
     }
@@ -32709,6 +32767,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         @include fill($bg: $kendo-grid-bg );
     }
 
+    .k-group-footer td,
+    .k-grouping-row td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td,
     .k-table-tbody .k-group-cell {
@@ -32744,6 +32804,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         }
 
         // Selected state
+        td.k-selected,
+        .k-table-row.k-selected > td,
         .k-table-td.k-selected,
         .k-table-row.k-selected > .k-table-td {
             color: $kendo-grid-selected-text;
@@ -32752,7 +32814,12 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 
         // Focused state
         .k-table-th,
+        td,
         .k-table-td,
+        .k-master-row > td,
+        .k-grouping-row > td,
+        .k-detail-row > td,
+        .k-group-footer > td,
         .k-master-row > .k-table-td,
         .k-grouping-row > .k-table-td,
         .k-detail-row > .k-table-td,
@@ -32788,30 +32855,37 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         .k-grid-header-locked,
         .k-grid-content-locked,
         .k-grid-header-locked .k-table-th,
+        .k-grid-content-locked td,
         .k-grid-content-locked .k-table-td {
             border-color: $kendo-grid-sticky-header-border;
         }
 
         .k-grid-content-locked {
+            .k-group-footer td,
             .k-group-footer .k-table-td,
             .k-group-cell {
                 @include fill( $border: $kendo-grid-header-border );
             }
 
+            .k-grouping-row + .k-table-row td,
             .k-grouping-row + .k-table-row .k-table-td {
                 border-top-color: $kendo-grid-header-border;
             }
 
             // Selected state
+            .k-selected td,
             .k-selected .k-table-td {
                 @include fill( $bg: $kendo-grid-sticky-selected-bg );
             }
 
+            .k-selected.k-table-alt-row td,
             .k-selected.k-table-alt-row .k-table-td {
                 @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
             }
 
             // Selected hover
+            .k-selected:hover td,
+            .k-selected.k-hover td,
             .k-selected:hover .k-table-td,
             .k-selected.k-hover .k-table-td {
                 @include fill( $bg: $kendo-grid-sticky-selected-hover-bg );
@@ -32855,6 +32929,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         }
 
         .k-table-th.k-grid-header-sticky,
+        td.k-grid-header-sticky,
         .k-table-td.k-grid-header-sticky,
         .k-grid-header-sticky.k-sorted {
             @include fill(
@@ -32905,12 +32980,14 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         // Selected state
         &.k-selected .k-grid-content-sticky,
         &.k-selected .k-grid-row-sticky,
+        td.k-grid-content-sticky.k-selected,
         .k-table-td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $kendo-grid-sticky-selected-bg );
         }
 
         &.k-selected.k-table-alt-row .k-grid-content-sticky,
         &.k-selected.k-table-alt-row .k-grid-row-sticky,
+        &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
         }
@@ -32930,6 +33007,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         &.k-selected:hover .k-grid-row-sticky,
         &.k-selected.k-hover .k-grid-content-sticky,
         &.k-selected.k-hover .k-grid-row-sticky,
+        &:hover td.k-grid-content-sticky.k-selected,
+        &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
         &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
             background-color: $kendo-grid-sticky-selected-hover-bg;
@@ -32950,12 +33029,15 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         }
 
         .k-grid-row-sticky {
+            td,
             .k-table-td {
                 border-top-color: $kendo-grid-sticky-border;
                 border-bottom-color: $kendo-grid-sticky-border;
                 background-color: $kendo-grid-sticky-bg;
             }
 
+            &:hover td,
+            &.k-hover td,
             &:hover .k-table-td,
             &.k-hover .k-table-td {
                 background-color: $kendo-grid-sticky-hover-bg;
@@ -32963,12 +33045,15 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         }
 
         .k-table-alt-row .k-grid-content-sticky,
+        .k-grid-row-sticky.k-table-alt-row td,
         .k-grid-row-sticky.k-table-alt-row .k-table-td {
             @include fill( $bg: $kendo-grid-sticky-alt-bg );
         }
 
         // Selected state
         .k-table-row.k-selected .k-grid-content-sticky,
+        .k-selected.k-grid-row-sticky td,
+        .k-grid-row-sticky td.k-selected,
         .k-selected.k-grid-row-sticky .k-table-td,
         .k-grid-row-sticky .k-table-td.k-selected,
         .k-selected.k-grid-content-sticky {
@@ -32976,6 +33061,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         }
 
         .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
+        .k-selected.k-table-alt-row.k-grid-row-sticky td,
         .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
         .k-table-alt-row .k-selected.k-grid-content-sticky {
             @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
@@ -32984,6 +33070,10 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         // Hover state
         .k-table-row:hover .k-grid-content-sticky,
         .k-table-row.k-hover .k-grid-content-sticky,
+        .k-grid-row-sticky:hover td,
+        .k-grid-row-sticky.k-hover td,
+        .k-grid-row-sticky.k-table-alt-row:hover td,
+        .k-grid-row-sticky.k-table-alt-row.k-hover td,
         .k-grid-row-sticky:hover .k-table-td,
         .k-grid-row-sticky.k-hover .k-table-td,
         .k-grid-row-sticky.k-table-alt-row:hover .k-table-td,
@@ -32996,12 +33086,18 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         // Selected + Hover
         .k-table-row.k-selected:hover .k-grid-content-sticky,
         .k-table-row.k-selected.k-hover .k-grid-content-sticky,
+        .k-selected.k-grid-row-sticky:hover td,
+        .k-selected.k-grid-row-sticky.k-hover td,
+        .k-selected.k-table-alt-row.k-grid-row-sticky:hover td,
+        .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover td,
         .k-selected.k-grid-row-sticky:hover .k-table-td,
         .k-selected.k-grid-row-sticky.k-hover .k-table-td,
         .k-selected.k-table-alt-row.k-grid-row-sticky:hover .k-table-td,
         .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover .k-table-td,
         .k-table-row.k-selected.k-table-alt-row:hover .k-grid-content-sticky,
         .k-table-row.k-selected.k-table-alt-row.k-hover .k-grid-content-sticky,
+        .k-grid-row-sticky:hover td.k-selected,
+        .k-grid-row-sticky.k-hover td.k-selected,
         .k-grid-row-sticky:hover .k-table-td.k-selected,
         .k-grid-row-sticky.k-hover .k-table-td.k-selected,
         .k-table-row:hover .k-grid-content-sticky.k-selected,
@@ -35752,6 +35848,8 @@ $kendo-treelist-footer-row-border-width: 1px !default;
             transform: translate(0, -50%);
         }
 
+        .k-table-row.k-footer td,
+        .k-table-row.k-footer-template td,
         .k-table-row.k-footer .k-table-td,
         .k-table-row.k-footer-template .k-table-td {
             border-width: $kendo-treelist-footer-row-border-width 0;
@@ -35759,6 +35857,7 @@ $kendo-treelist-footer-row-border-width: 1px !default;
             font-weight: bold;
         }
 
+        .k-table-row.k-footer + .k-table-row.k-footer td,
         .k-table-row.k-footer + .k-table-row.k-footer .k-table-td {
             border-top-width: 0;
         }

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ff6358",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue-a11y.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue A11Y",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.12.1-dev.3",
+    "version": "5.12.1-dev.4",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.12.1-dev.3",
+  "version": "5.12.1-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -48,8 +48,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^1.0.0",
-    "@progress/kendo-theme-core": "^5.12.1-dev.3",
-    "@progress/kendo-theme-utils": "^5.12.1-dev.3"
+    "@progress/kendo-theme-core": "^5.12.1-dev.4",
+    "@progress/kendo-theme-utils": "^5.12.1-dev.4"
   },
-  "gitHead": "8c82f49a750901799f12f09ca977f65b74ff9577"
+  "gitHead": "a62113f259ebc1b7722c0871fb93955f8bf4c409"
 }

package/scss/button/_layout.scss

@@ -88,6 +88,45 @@
             > .k-button-icon {
                 min-width: calc( #{$_font-size} * #{$_line-height} );
                 min-height: calc( #{$_font-size} * #{$_line-height} );
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+
+                &.k-svg-icon > svg,
+                &.k-icon-md > svg {
+                    width: $kendo-icon-size-md;
+                    height: $kendo-icon-size-md;
+                }
+
+                &.k-icon-xs > svg {
+                    width: $kendo-icon-size-xs;
+                    height: $kendo-icon-size-xs;
+                }
+
+                &.k-icon-sm > svg {
+                    width: $kendo-icon-size-sm;
+                    height: $kendo-icon-size-sm;
+                }
+
+                &.k-icon-lg > svg {
+                    width: $kendo-icon-size-lg;
+                    height: $kendo-icon-size-lg;
+                }
+
+                &.k-icon-xl > svg {
+                    width: $kendo-icon-size-xl;
+                    height: $kendo-icon-size-xl;
+                }
+
+                &.k-icon-xxl > svg {
+                    width: $kendo-icon-size-xxl;
+                    height: $kendo-icon-size-xxl;
+                }
+
+                &.k-icon-xxxl > svg {
+                    width: $kendo-icon-size-xxxl;
+                    height: $kendo-icon-size-xxxl;
+                }
             }
         }
     }