Create Icon component with L7 and Deny icon styling

ui-v2/app/components/topology-metrics/icon.hbs

@@ -0,0 +1,17 @@
+{{#each @items as |item|}}
+{{#let (find-by 'id' (concat item.Namespace item.Name) @positions) as |style|}}
+  {{#if (eq item.Intention.Action 'deny')}}
+    <span class="deny" style={{{ concat 'top:' style.y 'px;left:' style.x 'px;'}}}>
+      <Tooltip>
+        An intention is set to 'deny' that prohibits these services from connecting.
+      </Tooltip>
+    </span>
+  {{else if (not item.Intention.Action)}}
+  <span class="L7" style={{{ concat 'top:' style.y 'px;left:' style.x 'px;'}}}>
+    <Tooltip>
+      The intention between these services has Layer 7 permissions, so certain requests may or may not be permitted.
+    </Tooltip>
+  </span>
+  {{/if}}
+{{/let}}
+{{/each}}

ui-v2/app/components/topology-metrics/skin.scss

@@ -94,15 +94,45 @@
   circle {
     fill: $white;
   }
-  polygon {
+  #allow-arrow {
     fill: $gray-300;
     stroke-linejoin: round;
   }
   path,
-  circle,
-  polygon {
+  #allow-dot,
+  #allow-arrow {
     stroke: $gray-300;
     stroke-width: 2;
   }
-
+  path[data-permission='deny'] {
+    stroke: $red-500;
+  }
+  #deny-dot {
+    stroke: $red-500;
+    stroke-width: 2;
+  }
+  #deny-arrow {
+    fill: $red-500;
+    stroke: $red-500;
+    stroke-linejoin: round;
+  }
 }
+
+
+// Icon on SVG Lines
+#downstream-lines,
+#upstream-lines {
+  .deny::before {
+    @extend %with-cancel-square-fill-color-mask, %as-pseudo;
+    background-color: $red-500;
+  }
+  .L7::before {
+    @extend %with-layers-mask, %as-pseudo;
+    background-color: $gray-300;
+  }
+  span {
+    transform: translate(-50%,-50%);
+    position: absolute;
+    background-color: $white;
+  }
+}