Clean up icons

Clean up duplicate svg icons from assets directory.
Created a statusIcon component to dynamically render
status icons instead of using background-image in
scss files.

- Moved/removed on, off, critical, warning svg icons from
  assets directory
- Updated background-image status icons to use <icon>
  or <status-icon> directive

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic0f06d78b0861d6f60d40b2dcc0b80fd6dad2a88

3 files changed, 5 insertions, 5 deletions

diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index c0f05d2..5dc6f03 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -45,7 +45,7 @@
             <div class="row column">
               <h5 class="small-12 content-label">Subcomponents</h5>
               <p ng-repeat="sub_component in inventory.sub_components" class="large-6 small-3 courier-bold" ng-if="sub_component.Present">
-                <span class="icon icon__warning" ng-if="!sub_component.Functional"></span>
+                <icon file="icon-warning" aria-hidden="true" ng-if="!sub_component.Functional"></icon>
                 {{sub_component.title}}
               </p>
             </div>
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index 6f2b2d2..c65a9dd 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -57,7 +57,10 @@
     <tbody class="sensors__tbody">
       <tr class="sensors__tbody-row" ng-repeat="sensor in data|filter:filterBySeverity|filter:filterBySearchTerms|orderBy:'+custom_order' as filteredSensorData">
         <th class="sensors__tbody-header">
-          <span class="icon" ng-class="{'icon__critical': sensor.status == 'critical', 'icon__warning': sensor.status == 'warning', 'icon__normal': sensor.status == 'normal'}" aria-label="Sensor status: {{sensor.status}}" ></span>
+          <status-icon status="{{ sensor.status == 'critical' ? 'error' :
+                                  sensor.status == 'warning' ? 'warn' : null }}"
+                       aria-label="Sensor status: {{sensor.status}}">
+          </status-icon>
           <span>{{sensor.title}}</span>
         </th>
         <td class="sensors__tbody-cell">
diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss
index c9efd49..6912f04 100644
--- a/app/server-health/styles/sensors.scss
+++ b/app/server-health/styles/sensors.scss
@@ -72,9 +72,6 @@ $thresh-normal: $accent-02--02;
   background: $background-02;
   padding: 0.5rem 1rem;
   font-weight: 700;
-  .icon.icon__normal {
-    display: none;
-  }
 
   @include mediaQuery(medium) {
     flex: 1;