From 5189b022710dad07ebe89be3d8bd0ffc4bc23e4b Mon Sep 17 00:00:00 2001
From: "Hung-Han (Henry) Chen" <1474479+chenhunghan@users.noreply.github.com>
Date: Tue, 3 Nov 2020 18:23:26 +0800
Subject: [PATCH] Use <Icon /> to replace <i/>

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>
---
 .../deployment-scale-dialog.scss                 |  3 +++
 .../deployment-scale-dialog.tsx                  | 16 ++++++----------
 2 files changed, 9 insertions(+), 10 deletions(-)

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 &&