npm - @syncfusion/blazor-themes - Versions diffs - 26.1.42 → 26.2.5 - Mend

@syncfusion/blazor-themes 26.1.42 → 26.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (308) hide show

package/SCSS-Themes/querybuilder/query-builder/bootstrap.scss CHANGED Viewed

@@ -1354,7 +1354,7 @@ $qryblr-drag-icon-color: $grey-light-font !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/bootstrap4.scss CHANGED Viewed

@@ -1356,7 +1356,7 @@ $qryblr-drag-icon-color: $gray-700 !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/bootstrap5-dark.scss CHANGED Viewed

@@ -1357,7 +1357,7 @@ $qryblr-drag-icon-color: $icon-color !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/bootstrap5.scss CHANGED Viewed

@@ -1357,7 +1357,7 @@ $qryblr-drag-icon-color: $icon-color !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/fabric-dark.scss CHANGED Viewed

@@ -1354,7 +1354,7 @@ $qryblr-drag-icon-color: $neutral-light-fontalt !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/fabric.scss CHANGED Viewed

@@ -1354,7 +1354,7 @@ $qryblr-drag-icon-color: $neutral-light-font !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/fluent-dark.scss CHANGED Viewed

@@ -1356,7 +1356,7 @@ $qryblr-drag-icon-color: $secondary-text-color !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/fluent.scss CHANGED Viewed

@@ -1356,7 +1356,7 @@ $qryblr-drag-icon-color: $secondary-text-color !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/fluent2-dark.scss CHANGED Viewed

@@ -1356,7 +1356,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/fluent2.scss CHANGED Viewed

@@ -1356,7 +1356,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/highcontrast.scss CHANGED Viewed

@@ -1354,7 +1354,7 @@ $qryblr-drag-icon-color: $content-font !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/material-dark.scss CHANGED Viewed

@@ -1355,7 +1355,7 @@ $qryblr-drag-icon-color: $grey-dark-font !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/material.scss CHANGED Viewed

@@ -1354,7 +1354,7 @@ $qryblr-drag-icon-color: rgba($grey-black, .87) !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/material3-dark.scss CHANGED Viewed

@@ -1359,7 +1359,7 @@ $qryblr-drag-icon-color: rgba($secondary-text-color) !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/material3.scss CHANGED Viewed

@@ -1359,7 +1359,7 @@ $qryblr-drag-icon-color: rgba($secondary-text-color) !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/tailwind-dark.scss CHANGED Viewed

@@ -1356,7 +1356,7 @@ $qryblr-drag-icon-color: $secondary-text-color !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/querybuilder/query-builder/tailwind.scss CHANGED Viewed

@@ -1356,7 +1356,7 @@ $qryblr-drag-icon-color: $secondary-text-color !default;
 .e-query-builder .e-btn.e-round.e-small {
   @if $theme-name == 'fluent2' {
     &:hover {
-      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
     }
     &:focus {

package/SCSS-Themes/ribbon/ribbon/bds-dark.scss CHANGED Viewed

@@ -60,15 +60,18 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: $text-2xl !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-btn-gap: 4px !default;
+$ribbon-large-items-min-width-height: 24px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
 $ribbon-items-btn-size: $text-xs !default;
 $ribbon-items-label-size: $text-sm !default;
 $ribbon-items-btn-icon-size : $text-base !default;
+$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
 $ribbon-items-caret-icon-size: $text-sm !default;
 $ribbon-items-margin: 5px !default;
 $ribbon-items-height: 18px !default;
+$ribbon-items-min-width-height: 16px !default;
 $ribbon-checkbox-margin: 8px 0 8px 12px !default;
 $ribbon-rtl-checkbox-margin: 8px 12px 8px 0 !default;
 $ribbon-items-checkbox-size: $text-xs !default;
@@ -206,6 +209,8 @@ $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 125% !default;
+$ribbon-bigger-large-items-min-width-height: 32px !default;
+$ribbon-bigger-items-min-width-height: $text-xl;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 125% !default;
@@ -214,6 +219,7 @@ $ribbon-bigger-items-icon-height: 20px !default;
 $ribbon-bigger-items-icon-size: $text-xl !default;
 $ribbon-bigger-items-margin: 7px !default;
 $ribbon-bigger-items-btn-icon-size: $text-xl !default;
+$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
 $ribbon-bigger-items-checkbox-size: $text-sm !default;
 $ribbon-bigger-checkbox-margin: 10px 0 10px 16px !default;
 $ribbon-bigger-rtl-checkbox-margin: 10px 16px 10px 0 !default;
@@ -431,6 +437,14 @@ $ribbon-items-focus-box-shadow: none !default;
   line-height: $line-height;
 }
+@mixin ribbon-items-icon-images($items-size) {
+  min-height: $items-size;
+  min-width: $items-size;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
 @mixin ribbon-font-props($font-size, $line-height) {
   font-size: $font-size;
   line-height: $line-height;
@@ -1099,6 +1113,7 @@ $ribbon-items-focus-box-shadow: none !default;
           }
           .e-btn-icon:not(.e-caret) {
+            @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
             font-size: $ribbon-large-items-icon-size;
             font-weight: $ribbon-items-font-weight;
             padding: $ribbon-large-items-icon-padding;
@@ -1217,6 +1232,9 @@ $ribbon-items-focus-box-shadow: none !default;
           .e-btn-icon {
             @include ribbon-font-props(16px, 16px);
             margin: $ribbon-items-margin;
+            &:not(.e-caret) {
+              @include ribbon-items-icon-images($ribbon-items-min-width-height);
+            }
           }
         }
@@ -1358,6 +1376,13 @@ $ribbon-items-focus-box-shadow: none !default;
         width: 100%;
         height: $ribbon-medium-item-height;
+        .e-btn .e-btn-icon {
+          &:not(.e-caret) {
+            min-width: $ribbon-overflow-items-min-width-height;
+            min-height: $ribbon-overflow-items-min-width-height;
+          }
+        }
         .e-btn .e-btn-icon.e-icon-left {
           margin: 0;
         }
@@ -1396,7 +1421,7 @@ $ribbon-items-focus-box-shadow: none !default;
       &.e-ribbon-medium-item {
         .e-btn .e-btn-icon.e-icon-left {
-          padding: $ribbon-button-icon-padding;
+          margin: $ribbon-button-icon-padding;
         }
         &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -1435,7 +1460,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-rtl-button-icon-padding;
+            margin: $ribbon-rtl-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -1887,6 +1912,7 @@ $ribbon-items-focus-box-shadow: none !default;
           max-width: $ribbon-bigger-large-items-max-width;
           .e-btn-icon:not(.e-caret) {
+            @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
@@ -1917,6 +1943,10 @@ $ribbon-items-focus-box-shadow: none !default;
           .e-btn-icon {
             @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
             margin: $ribbon-bigger-items-margin;
+            &:not(.e-caret) {
+              min-width: $ribbon-bigger-items-min-width-height;
+              min-height: $ribbon-bigger-items-min-width-height;
+            }
           }
         }
@@ -1973,6 +2003,10 @@ $ribbon-items-focus-box-shadow: none !default;
         }
         .e-btn .e-btn-icon {
           font-size: $ribbon-bigger-items-btn-icon-size;
+          &:not(.e-caret) {
+            min-width: $ribbon-bigger-overflow-items-min-width-height;
+            min-height: $ribbon-bigger-overflow-items-min-width-height;
+          }
           &.e-icon-left {
             margin: 0;
           }
@@ -2009,7 +2043,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-bigger-button-icon-padding;
+            margin: $ribbon-bigger-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -2045,7 +2079,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-bigger-rtl-button-icon-padding;
+            margin: $ribbon-bigger-rtl-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {

package/SCSS-Themes/ribbon/ribbon/bds.scss CHANGED Viewed

@@ -60,15 +60,18 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: $text-2xl !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-btn-gap: 4px !default;
+$ribbon-large-items-min-width-height: 24px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
 $ribbon-items-btn-size: $text-xs !default;
 $ribbon-items-label-size: $text-sm !default;
 $ribbon-items-btn-icon-size : $text-base !default;
+$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
 $ribbon-items-caret-icon-size: $text-sm !default;
 $ribbon-items-margin: 5px !default;
 $ribbon-items-height: 18px !default;
+$ribbon-items-min-width-height: 16px !default;
 $ribbon-checkbox-margin: 8px 0 8px 12px !default;
 $ribbon-rtl-checkbox-margin: 8px 12px 8px 0 !default;
 $ribbon-items-checkbox-size: $text-xs !default;
@@ -206,6 +209,8 @@ $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 125% !default;
+$ribbon-bigger-large-items-min-width-height: 32px !default;
+$ribbon-bigger-items-min-width-height: $text-xl;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 125% !default;
@@ -214,6 +219,7 @@ $ribbon-bigger-items-icon-height: 20px !default;
 $ribbon-bigger-items-icon-size: $text-xl !default;
 $ribbon-bigger-items-margin: 7px !default;
 $ribbon-bigger-items-btn-icon-size: $text-xl !default;
+$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
 $ribbon-bigger-items-checkbox-size: $text-sm !default;
 $ribbon-bigger-checkbox-margin: 10px 0 10px 16px !default;
 $ribbon-bigger-rtl-checkbox-margin: 10px 16px 10px 0 !default;
@@ -431,6 +437,14 @@ $ribbon-items-focus-box-shadow: none !default;
   line-height: $line-height;
 }
+@mixin ribbon-items-icon-images($items-size) {
+  min-height: $items-size;
+  min-width: $items-size;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
 @mixin ribbon-font-props($font-size, $line-height) {
   font-size: $font-size;
   line-height: $line-height;
@@ -1099,6 +1113,7 @@ $ribbon-items-focus-box-shadow: none !default;
           }
           .e-btn-icon:not(.e-caret) {
+            @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
             font-size: $ribbon-large-items-icon-size;
             font-weight: $ribbon-items-font-weight;
             padding: $ribbon-large-items-icon-padding;
@@ -1217,6 +1232,9 @@ $ribbon-items-focus-box-shadow: none !default;
           .e-btn-icon {
             @include ribbon-font-props(16px, 16px);
             margin: $ribbon-items-margin;
+            &:not(.e-caret) {
+              @include ribbon-items-icon-images($ribbon-items-min-width-height);
+            }
           }
         }
@@ -1358,6 +1376,13 @@ $ribbon-items-focus-box-shadow: none !default;
         width: 100%;
         height: $ribbon-medium-item-height;
+        .e-btn .e-btn-icon {
+          &:not(.e-caret) {
+            min-width: $ribbon-overflow-items-min-width-height;
+            min-height: $ribbon-overflow-items-min-width-height;
+          }
+        }
         .e-btn .e-btn-icon.e-icon-left {
           margin: 0;
         }
@@ -1396,7 +1421,7 @@ $ribbon-items-focus-box-shadow: none !default;
       &.e-ribbon-medium-item {
         .e-btn .e-btn-icon.e-icon-left {
-          padding: $ribbon-button-icon-padding;
+          margin: $ribbon-button-icon-padding;
         }
         &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -1435,7 +1460,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-rtl-button-icon-padding;
+            margin: $ribbon-rtl-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -1887,6 +1912,7 @@ $ribbon-items-focus-box-shadow: none !default;
           max-width: $ribbon-bigger-large-items-max-width;
           .e-btn-icon:not(.e-caret) {
+            @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
@@ -1917,6 +1943,10 @@ $ribbon-items-focus-box-shadow: none !default;
           .e-btn-icon {
             @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
             margin: $ribbon-bigger-items-margin;
+            &:not(.e-caret) {
+              min-width: $ribbon-bigger-items-min-width-height;
+              min-height: $ribbon-bigger-items-min-width-height;
+            }
           }
         }
@@ -1973,6 +2003,10 @@ $ribbon-items-focus-box-shadow: none !default;
         }
         .e-btn .e-btn-icon {
           font-size: $ribbon-bigger-items-btn-icon-size;
+          &:not(.e-caret) {
+            min-width: $ribbon-bigger-overflow-items-min-width-height;
+            min-height: $ribbon-bigger-overflow-items-min-width-height;
+          }
           &.e-icon-left {
             margin: 0;
           }
@@ -2009,7 +2043,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-bigger-button-icon-padding;
+            margin: $ribbon-bigger-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -2045,7 +2079,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-bigger-rtl-button-icon-padding;
+            margin: $ribbon-bigger-rtl-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {

package/SCSS-Themes/ribbon/ribbon/bootstrap-dark.scss CHANGED Viewed

@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 6px !default;
 $ribbon-large-items-btn-gap: 5px !default;
+$ribbon-large-items-min-width-height: 32px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 2px !default;
 $ribbon-items-font-weight: 400 !default;
 $ribbon-items-btn-size: 12px !default;
 $ribbon-items-label-size: 12px !default;
 $ribbon-items-btn-icon-size: 16px !default;
+$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
 $ribbon-items-caret-icon-size: 12px !default;
 $ribbon-items-margin: 8px !default;
 $ribbon-checkbox-margin: 7px 0 7px 12px !default;
 $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
 $ribbon-items-height: 18px !default;
+$ribbon-items-min-width-height: 16px !default;
 $ribbon-items-checkbox-size: 12px !default;
 $ribbon-items-checkbox-padding: 0 8px !default;
 $ribbon-input-group-height: 32px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
 $ribbon-bigger-large-items-btn-padding: 0 6px !default;
 $ribbon-bigger-large-items-btn-size: 14px !default;
 $ribbon-bigger-large-items-btn-height: 22px !default;
+$ribbon-bigger-large-items-min-width-height: 40px !default;
+$ribbon-bigger-items-min-width-height: 20px;
 $ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: 14px !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 22px !default;
 $ribbon-bigger-items-icon-height: 20px !default;
 $ribbon-bigger-items-icon-size: 20px !default;
 $ribbon-bigger-items-btn-icon-size: 18px !default;
+$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
 $ribbon-bigger-items-margin: 10px !default;
 $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
 $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
@@ -431,6 +437,14 @@ $ribbon-items-focus-box-shadow: none !default;
   line-height: $line-height;
 }
+@mixin ribbon-items-icon-images($items-size) {
+  min-height: $items-size;
+  min-width: $items-size;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
 @mixin ribbon-font-props($font-size, $line-height) {
   font-size: $font-size;
   line-height: $line-height;
@@ -1099,6 +1113,7 @@ $ribbon-items-focus-box-shadow: none !default;
           }
           .e-btn-icon:not(.e-caret) {
+            @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
             font-size: $ribbon-large-items-icon-size;
             font-weight: $ribbon-items-font-weight;
             padding: $ribbon-large-items-icon-padding;
@@ -1217,6 +1232,9 @@ $ribbon-items-focus-box-shadow: none !default;
           .e-btn-icon {
             @include ribbon-font-props(16px, 16px);
             margin: $ribbon-items-margin;
+            &:not(.e-caret) {
+              @include ribbon-items-icon-images($ribbon-items-min-width-height);
+            }
           }
         }
@@ -1358,6 +1376,13 @@ $ribbon-items-focus-box-shadow: none !default;
         width: 100%;
         height: $ribbon-medium-item-height;
+        .e-btn .e-btn-icon {
+          &:not(.e-caret) {
+            min-width: $ribbon-overflow-items-min-width-height;
+            min-height: $ribbon-overflow-items-min-width-height;
+          }
+        }
         .e-btn .e-btn-icon.e-icon-left {
           margin: 0;
         }
@@ -1396,7 +1421,7 @@ $ribbon-items-focus-box-shadow: none !default;
       &.e-ribbon-medium-item {
         .e-btn .e-btn-icon.e-icon-left {
-          padding: $ribbon-button-icon-padding;
+          margin: $ribbon-button-icon-padding;
         }
         &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -1435,7 +1460,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-rtl-button-icon-padding;
+            margin: $ribbon-rtl-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -1887,6 +1912,7 @@ $ribbon-items-focus-box-shadow: none !default;
           max-width: $ribbon-bigger-large-items-max-width;
           .e-btn-icon:not(.e-caret) {
+            @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
@@ -1917,6 +1943,10 @@ $ribbon-items-focus-box-shadow: none !default;
           .e-btn-icon {
             @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
             margin: $ribbon-bigger-items-margin;
+            &:not(.e-caret) {
+              min-width: $ribbon-bigger-items-min-width-height;
+              min-height: $ribbon-bigger-items-min-width-height;
+            }
           }
         }
@@ -1973,6 +2003,10 @@ $ribbon-items-focus-box-shadow: none !default;
         }
         .e-btn .e-btn-icon {
           font-size: $ribbon-bigger-items-btn-icon-size;
+          &:not(.e-caret) {
+            min-width: $ribbon-bigger-overflow-items-min-width-height;
+            min-height: $ribbon-bigger-overflow-items-min-width-height;
+          }
           &.e-icon-left {
             margin: 0;
           }
@@ -2009,7 +2043,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-bigger-button-icon-padding;
+            margin: $ribbon-bigger-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -2045,7 +2079,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-bigger-rtl-button-icon-padding;
+            margin: $ribbon-bigger-rtl-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {