1 files changed, 21 insertions, 5 deletions
diff --git a/toolkit/content/widgets/moz-button/moz-button.css b/toolkit/content/widgets/moz-button/moz-button.css
index 71d57ea93a..4eb6839e06 100644
--- a/toolkit/content/widgets/moz-button/moz-button.css
+++ b/toolkit/content/widgets/moz-button/moz-button.css
@@ -23,6 +23,10 @@ button {
   /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
   font-size: var(--button-font-size);
   width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-small);
 
   &[size=small] {
     min-height: var(--button-min-height-small);
@@ -125,21 +129,33 @@ button {
     }
   }
 
-  &[type~=icon] {
+  &[type~=icon]:not(.labelled) {
     background-size: var(--icon-size-default);
     background-position: center;
     background-repeat: no-repeat;
-    -moz-context-properties: fill, stroke;
-    fill: currentColor;
-    stroke: currentColor;
+  }
+
+  &[type~=icon]:not(.labelled),
+  &:not(.labelled):has(img) {
     width: var(--button-size-icon);
     height: var(--button-size-icon);
     padding: var(--button-padding-icon);
-    color: var(--icon-color);
 
     &[size=small] {
       width: var(--button-size-icon-small);
       height: var(--button-size-icon-small);
     }
   }
+
+  img,
+  &[type~=icon]:not(.labelled) {
+    -moz-context-properties: fill, fill-opacity, stroke;
+    fill: currentColor;
+    stroke: currentColor;
+  }
+
+  img {
+    width: var(--icon-size-default);
+    height: var(--icon-size-default);
+  }
 }