1 files changed, 44 insertions, 0 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_type_icon.vue b/app/assets/javascripts/work_items/components/work_item_type_icon.vue
new file mode 100644
index 00000000000..fd914fa350b
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_type_icon.vue
@@ -0,0 +1,44 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import { WORK_ITEMS_TYPE_MAP } from '../constants';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  props: {
+    workItemType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showText: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    workItemIconName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    iconName() {
+      return (
+        this.workItemIconName || WORK_ITEMS_TYPE_MAP[this.workItemType]?.icon || 'issue-type-issue'
+      );
+    },
+    workItemTypeName() {
+      return WORK_ITEMS_TYPE_MAP[this.workItemType]?.name;
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <gl-icon :name="iconName" class="gl-mr-2" />
+    <span v-if="workItemTypeName" :class="{ 'gl-sr-only': !showText }">{{ workItemTypeName }}</span>
+  </span>
+</template>