1 files changed, 164 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss
new file mode 100644
index 0000000000..c80055d055
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_icon.scss
@@ -0,0 +1,164 @@
+$image-icon-normal-size: 20px;
+
+.icon-component {
+  display: inline-flex;
+  align-items: center;
+
+  &.clickable:hover {
+    cursor: pointer;
+  }
+  .icon-label {
+    color: $blue;
+  }
+  &.disabled {
+    .icon-label {
+      color: $tlv-light-gray;
+			opacity: 0.7;
+    }
+  }
+  .icon {
+    width: $image-icon-normal-size;
+    height: $image-icon-normal-size;
+    margin: 0 6px;
+    background-repeat: no-repeat;
+
+    &.trash {
+      background-image: url($trash-icon);
+    }
+
+    &.artifacts {
+      background-image: url($artifacts-icon);
+    }
+
+    &.base {
+      background-image: url($base-module-icon);
+    }
+
+    &.module {
+      background-image: url($module-icon);
+    }
+
+    &.pencil {
+      background-image: url($pencil-icon);
+    }
+
+    &.check {
+      background-image: url($check-icon);
+      width: 30px;
+      height: 30px;
+    }
+
+    &.download {
+      background-image: url($download-icon);
+      width: 16px;
+      height: 14px;
+    }
+
+    &.upload {
+      background-image: url($upload-icon);
+      width: 16px;
+      height: 14px;
+    }
+    &.validation-artifacts {
+      width: 13px;
+      height: 17px;
+      position: relative;
+      top: 3px;
+      background-image: url($artifacts-regular-icon);
+      &.selected {
+        background-image: url($artifacts-selected-icon);
+      }
+    }
+    &.network {
+      background-image: url($network-icon);
+      width: 12px;
+      height: 12px;
+      &.selected {
+        background-image: url($network-selected-icon);
+      }
+    }
+    &.validation-other {
+      background-image: url($others-icon);
+      width: 12px;
+      height: 12px;
+      &.selected {
+        background-image: url($others-selected-icon);
+      }
+    }
+    &.volume {
+      width: 15px;
+      height: 16px;
+      background-image: url($volume-icon);
+      &.selected {
+        background-image: url($volume-selected-icon);
+      }
+    }
+    &.zip {
+      background-image: url($zip-icon);
+      height: 23px;
+      width: 29px;
+      &.selected {
+        background-image: url($zip-selected-icon);
+      }
+    }
+    &.heat {
+      background-image: url($heat-icon);
+      height: 14px;
+      width: 16px;
+      &.selected {
+        background-image: url($heat-selected-icon);
+      }
+    }
+    &.env {
+      background-image: url($env-icon);
+      height: 15px;
+      width: 16px;
+      &.selected {
+        background-image: url($env-selected-icon);
+      }
+    }
+    &.error {
+      width: 14px;
+      min-width: 14px;
+      height: 14px;
+      background-image: url($error-icon-sm);
+    }
+    &.warning {
+      height: 13px;
+      width: 15px;
+      min-width: 15px;
+      background-image: url($warning-icon-sm);
+    }
+    &.error-lg {
+      width: 17px;
+      min-width: 17px;
+      height: 17px;
+      background-image: url($error-icon-lg);
+    }
+    &.warning-lg {
+      width: 19px;
+      min-width: 19px;
+      height: 17px;
+      background-image: url($warning-icon-lg);
+    }
+    &.chevron-up {
+      background-image: url($chevron_down);
+      transform: rotate(180deg);
+      height: 7px;
+      width: 11px;
+    }
+    &.chevron-down {
+      background-image: url($chevron_down);
+      height: 7px;
+      width: 11px;
+    }
+    &.go-to-overview {
+      background-image: url($go-to-overview-icon);
+      height: 15px;
+      width: 18px;
+      &.disabled {
+        background-image: url($go-to-overview-disabled-icon);
+      }
+    }
+  }
+}