refactor: respect --vaadin-icon-visual-size in component icons (#10254)

jouni · web-flow · commit ee21fc1a2ece · 2025-09-29T11:29:28.000+03:00
diff --git a/packages/app-layout/src/styles/vaadin-drawer-toggle-base-styles.js b/packages/app-layout/src/styles/vaadin-drawer-toggle-base-styles.js
@@ -11,7 +11,7 @@ export const drawerToggle = css`
     background: currentColor;
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-menu);
+    mask: var(--_vaadin-icon-menu) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/context-menu/src/styles/vaadin-context-menu-item-base-styles.js b/packages/context-menu/src/styles/vaadin-context-menu-item-base-styles.js
@@ -13,7 +13,7 @@ const menuItemStyles = css`
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     rotate: -90deg;
     visibility: hidden;
     width: var(--vaadin-icon-size, 1lh);
diff --git a/packages/crud/src/styles/vaadin-crud-edit-base-styles.js b/packages/crud/src/styles/vaadin-crud-edit-base-styles.js
@@ -16,7 +16,7 @@ export const crudEditStyles = css`
     background: currentColor;
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-edit);
+    mask: var(--_vaadin-icon-edit) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/dashboard/src/styles/vaadin-dashboard-widget-section-base-styles.js b/packages/dashboard/src/styles/vaadin-dashboard-widget-section-base-styles.js
@@ -85,7 +85,7 @@ export const dashboardWidgetAndSectionStyles = css`
     height: var(--vaadin-icon-size, 1lh);
     width: var(--vaadin-icon-size, 1lh);
     background: currentColor;
-    mask-image: var(--icon);
+    mask: var(--icon) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   #focus-button-wrapper,
diff --git a/packages/details/src/styles/vaadin-details-summary-base-styles.js b/packages/details/src/styles/vaadin-details-summary-base-styles.js
@@ -60,7 +60,7 @@ export const detailsSummary = (partName = 'vaadin-details-summary') => css`
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
     rotate: -90deg;
   }
diff --git a/packages/field-base/src/styles/button-base-styles.js b/packages/field-base/src/styles/button-base-styles.js
@@ -23,6 +23,9 @@ export const button = css`
     display: block;
     height: var(--vaadin-icon-size, 1lh);
     width: var(--vaadin-icon-size, 1lh);
+    mask-size: var(--vaadin-icon-visual-size, 100%);
+    mask-position: 50%;
+    mask-repeat: no-repeat;
   }
 
   :host(:is(:not([clear-button-visible][has-value]), [disabled], [readonly])) [part~='clear-button'] {
diff --git a/packages/field-base/src/styles/field-base-styles.js b/packages/field-base/src/styles/field-base-styles.js
@@ -109,7 +109,7 @@ export const field = css`
     flex: none;
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-warn);
+    mask: var(--_vaadin-icon-warn) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     background: currentColor;
   }
 
diff --git a/packages/grid/src/styles/vaadin-grid-tree-toggle-base-styles.js b/packages/grid/src/styles/vaadin-grid-tree-toggle-base-styles.js
@@ -45,7 +45,7 @@ export const gridTreeToggleStyles = css`
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     background: currentColor;
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   :host(:not([expanded])) [part='toggle']::before {
diff --git a/packages/item/src/styles/vaadin-item-base-styles.js b/packages/item/src/styles/vaadin-item-base-styles.js
@@ -43,7 +43,7 @@ export const itemStyles = css`
     display: block;
     background: currentColor;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-checkmark);
+    mask: var(--_vaadin-icon-checkmark) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/login/src/styles/vaadin-login-form-wrapper-base-styles.js b/packages/login/src/styles/vaadin-login-form-wrapper-base-styles.js
@@ -55,7 +55,7 @@ export const loginFormWrapperStyles = css`
     display: inline-block;
     flex: none;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-warn);
+    mask: var(--_vaadin-icon-warn) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/map/src/styles/vaadin-map-base-styles.js b/packages/map/src/styles/vaadin-map-base-styles.js
@@ -265,19 +265,19 @@ export const mapStyles = css`
   }
 
   .ol-compass:empty::before {
-    mask-image: var(--_vaadin-icon-arrow-up);
+    mask: var(--_vaadin-icon-arrow-up) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-full-screen {
     grid-area: fullscreen;
   }
 
   .ol-full-screen button:empty::before {
-    mask-image: var(--_vaadin-icon-fullscreen);
+    mask: var(--_vaadin-icon-fullscreen) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-full-screen .ol-full-screen-true:empty::before {
-    mask-image: var(--_vaadin-icon-cross);
+    mask: var(--_vaadin-icon-cross) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-overviewmap {
@@ -333,7 +333,8 @@ export const mapStyles = css`
   }
 
   .ol-overviewmap button span:empty::before {
-    mask-image: var(--vaadin-map-icon-overview-map-collapse, var(--_vaadin-icon-chevron-down));
+    mask: var(--vaadin-map-icon-overview-map-collapse, var(--_vaadin-icon-chevron-down)) 50% /
+      var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-overviewmap.ol-collapsed button {
@@ -355,11 +356,12 @@ export const mapStyles = css`
   }
 
   .ol-zoom-in:empty::before {
-    mask-image: var(--vaadin-map-icon-zoom-in, var(--_vaadin-icon-plus));
+    mask: var(--vaadin-map-icon-zoom-in, var(--_vaadin-icon-plus)) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-zoom-out:empty::before {
-    mask-image: var(--vaadin-map-icon-zoom-out, var(--_vaadin-icon-minus));
+    mask: var(--vaadin-map-icon-zoom-out, var(--_vaadin-icon-minus)) 50% / var(--vaadin-icon-visual-size, 100%)
+      no-repeat;
   }
 
   .ol-zoom button.ol-zoom-in {
diff --git a/packages/menu-bar/src/styles/vaadin-menu-bar-button-base-styles.js b/packages/menu-bar/src/styles/vaadin-menu-bar-button-base-styles.js
@@ -32,7 +32,7 @@ export const menuBarButtonStyles = css`
     background: currentColor;
     content: '';
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/password-field/src/styles/vaadin-password-field-button-base-styles.js b/packages/password-field/src/styles/vaadin-password-field-button-base-styles.js
@@ -22,7 +22,7 @@ const passwordFieldBase = css`
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-eye);
+    mask: var(--_vaadin-icon-eye) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
diff --git a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js
@@ -416,6 +416,9 @@ const toolbar = css`
     display: block;
     height: var(--vaadin-icon-size, 1lh);
     width: var(--vaadin-icon-size, 1lh);
+    mask-size: var(--vaadin-icon-visual-size, 100%);
+    mask-repeat: no-repeat;
+    mask-position: 50%;
   }
 
   [part~='toolbar-button']:focus {
diff --git a/packages/side-nav/src/styles/vaadin-side-nav-shared-base-styles.js b/packages/side-nav/src/styles/vaadin-side-nav-shared-base-styles.js
@@ -44,7 +44,7 @@ export const sharedStyles = css`
     content: '';
     display: block;
     background: currentColor;
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     rotate: -90deg;
diff --git a/packages/tabs/src/styles/vaadin-tabs-base-styles.js b/packages/tabs/src/styles/vaadin-tabs-base-styles.js
@@ -74,7 +74,7 @@ export const tabsStyles = css`
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     background: currentColor;
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     rotate: 90deg;
   }
 
diff --git a/packages/upload/src/styles/vaadin-upload-file-base-styles.js b/packages/upload/src/styles/vaadin-upload-file-base-styles.js
@@ -38,6 +38,12 @@ export const uploadFileStyles = css`
     width: var(--vaadin-icon-size, 1lh);
   }
 
+  :is([part$='icon'], [part$='button'])::before {
+    mask-size: var(--vaadin-icon-visual-size, 100%);
+    mask-position: 50%;
+    mask-repeat: no-repeat;
+  }
+
   [part='done-icon']::before {
     background: var(--vaadin-upload-file-done-color, currentColor);
     mask-image: var(--_vaadin-icon-checkmark);
diff --git a/packages/upload/src/styles/vaadin-upload-icon-base-styles.js b/packages/upload/src/styles/vaadin-upload-icon-base-styles.js
@@ -17,7 +17,7 @@ export const uploadIconStyles = css`
     display: inline-block;
     flex: none;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-upload);
+    mask: var(--_vaadin-icon-upload) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 
