diff --git a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.scss b/src/renderer/components/+workloads-deployments/deployment-scale-dialog.scss
index 0f223a429a..6d14dc29ae 100644
--- a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.scss
+++ b/src/renderer/components/+workloads-deployments/deployment-scale-dialog.scss
@@ -29,6 +29,9 @@
 
     .plus-minus-container {
       margin-left: $margin * 2;
+      .Icon {
+        --color-active: black;
+      }
     }
 
     .warning {
diff --git a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx b/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx
index 1073442ffa..3073ba428f 100644
--- a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx
+++ b/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx
@@ -107,20 +107,16 @@ export class DeploymentScaleDialog extends Component<Props> {
             <Slider value={desiredReplicas} max={scaleMax} onChange={onChange as any /** see: https://github.com/mui-org/material-ui/issues/20191 */}/>
           </div>
           <div className="plus-minus-container">
-            <i
-              className="Icon material"
+            <Icon
+              material="add_circle_outline"
               onClick={this.desiredReplicasUp}
               data-testid="desired-replicas-up"
-            >
-              <span className="icon">add_circle_outline</span>
-            </i>
-            <i
-              className="Icon material"
+            />
+            <Icon
+              material="remove_circle_outline"
               onClick={this.desiredReplicasDown}
               data-testid="desired-replicas-down"
-            >
-              <span className="icon">remove_circle_outline</span>
-            </i>
+            />
           </div>
         </div>
         {warning &&