1 files changed, 19 insertions, 12 deletions

diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index c4b2900e020..9aff53cf8af 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -2,6 +2,7 @@
 /* global Flash */
 import editForm from './edit_form.vue';
 import issuableMixin from '../../../vue_shared/mixins/issuable';
+import Icon from '../../../vue_shared/components/icon.vue';
 
 export default {
   props: {
@@ -35,11 +36,12 @@ export default {
 
   components: {
     editForm,
+    Icon,
   },
 
   computed: {
-    lockIconClass() {
-      return this.isLocked ? 'fa-lock' : 'fa-unlock';
+    lockIcon() {
+      return this.isLocked ? 'lock' : 'lock-open';
     },
 
     isLockDialogOpen() {
@@ -66,11 +68,12 @@ export default {
 <template>
   <div class="block issuable-sidebar-item lock">
     <div class="sidebar-collapsed-icon">
-      <i
-        class="fa"
-        :class="lockIconClass"
+      <icon
+        :name="lockIcon"
+        :size="16"
         aria-hidden="true"
-      ></i>
+        class="sidebar-item-icon is-active">
+      </icon>
     </div>
 
     <div class="title hide-collapsed">
@@ -98,10 +101,12 @@ export default {
         v-if="isLocked"
         class="value sidebar-item-value"
       >
-        <i
+        <icon
+          name="lock"
+          :size="16"
           aria-hidden="true"
-          class="fa fa-lock sidebar-item-icon is-active"
-        ></i>
+          class="sidebar-item-icon inline is-active">
+        </icon>
         {{ __('Locked') }}
       </div>
 
@@ -109,10 +114,12 @@ export default {
         v-else
         class="no-value sidebar-item-value hide-collapsed"
       >
-        <i
+        <icon
+          name="lock-open"
+          :size="16"
           aria-hidden="true"
-          class="fa fa-unlock sidebar-item-icon"
-        ></i>
+          class="sidebar-item-icon inline">
+        </icon>
         {{ __('Unlocked') }}
       </div>
     </div>