From 315767eaa20a7783b1bcf7438e5971ac4aacf582 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 11 Mar 2024 16:31:14 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20import=20missing=20ico?=
 =?UTF-8?q?n=20to=20`PairedElementView`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Collections/PairedElementView.vue  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Collections/PairedElementView.vue b/client/src/components/Collections/PairedElementView.vue
index 181bfb67ece9..364832a22db2 100644
--- a/client/src/components/Collections/PairedElementView.vue
+++ b/client/src/components/Collections/PairedElementView.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faUnlink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { onMounted, ref, watch } from "vue";
 
 import localize from "@/utils/localization";
 
 import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
 
+library.add(faUnlink);
+
 interface Props {
     // TODO: Define the type of the pair prop
     pair: {
@@ -52,11 +57,13 @@ onMounted(() => {
                 </span>
             </span>
 
-            <span class="reverse-dataset-name flex-column">{{ pair.reverse.name }}</span>
+            <span class="reverse-dataset-name flex-column">
+                {{ pair.reverse.name }}
+            </span>
         </li>
 
         <button class="unpair-btn" @click="unlinkFn">
-            <span class="fa fa-unlink" :title="localize('Unpair')"></span>
+            <FontAwesomeIcon :icon="faUnlink" :title="localize('Unpair')" />
         </button>
     </div>
 </template>