4 files changed, 21 insertions, 8 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
index 00f1339d7f2..da9ff407faf 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
@@ -1,7 +1,11 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     user: {
       type: Object,
@@ -46,6 +50,6 @@ export default {
       class="avatar avatar-inline m-0"
       data-qa-selector="avatar_image"
     />
-    <i v-if="hasMergeIcon" aria-hidden="true" class="fa fa-exclamation-triangle merge-icon"></i>
+    <gl-icon v-if="hasMergeIcon" name="warning-solid" aria-hidden="true" class="merge-icon" />
   </span>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
index 5f8ba844218..26e88523abb 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
@@ -66,7 +66,7 @@ export default {
       href="#"
       role="button"
     >
-      <gl-icon aria-hidden="true" data-hidden="true" name="chevron-double-lg-right" :size="12" />
+      <gl-icon data-hidden="true" name="chevron-double-lg-right" :size="12" />
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
index eabd4d88d52..362ca4ab917 100644
--- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
@@ -112,11 +112,12 @@ export default {
     />
     <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
       <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
-      <i
+      <gl-icon
         v-if="isMergeRequest && !allAssigneesCanMerge"
+        name="warning-solid"
         aria-hidden="true"
-        class="fa fa-exclamation-triangle merge-icon"
-      ></i>
+        class="merge-icon"
+      />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
index cf6a0a4a151..3c1b3afe889 100644
--- a/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
@@ -1,9 +1,11 @@
 <script>
+import { GlButton } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import UncollapsedAssigneeList from '~/sidebar/components/assignees/uncollapsed_assignee_list.vue';
 
 export default {
   components: {
+    GlButton,
     UncollapsedAssigneeList,
   },
   inject: ['rootPath'],
@@ -27,9 +29,15 @@ export default {
 <template>
   <div class="gl-display-flex gl-flex-direction-column">
     <div v-if="emptyUsers" data-testid="none">
-      <span>
-        {{ __('None') }}
-      </span>
+      <span> {{ __('None') }} -</span>
+      <gl-button
+        data-testid="assign-yourself"
+        category="tertiary"
+        variant="link"
+        @click="$emit('assign-self')"
+      >
+        <span class="gl-text-gray-400">{{ __('assign yourself') }}</span>
+      </gl-button>
     </div>
     <uncollapsed-assignee-list v-else :users="users" :root-path="rootPath" />
   </div>