1 files changed, 23 insertions, 9 deletions

diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index 8ff3fbd7..f944737f 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -136,20 +136,25 @@ function toggleEntryStatus(element, toasting) {
 
     updateEntriesStatus([entryID], newStatus);
 
+    let icon, label;
+
     if (currentStatus === "read") {
-        link.innerHTML = '<span class="icon-label">' + link.dataset.labelRead + '</span>';
-        link.dataset.value = "unread";
+        icon = document.querySelector("template#icon_read");
+        label = link.dataset.labelRead;
         if (toasting) {
             toast(link.dataset.toastUnread);
         }
     } else {
-        link.innerHTML = '<span class="icon-label">' + link.dataset.labelUnread + '</span>';
-        link.dataset.value = "read";
+        icon = document.querySelector("template#icon_unread");
+        label = link.dataset.labelUnread;
         if (toasting) {
             toast(link.dataset.toastRead);
         }
     }
 
+    link.innerHTML = icon.innerHTML + '<span class="icon-label">' + label + '</span>';
+    link.dataset.value = newStatus;
+
     if (element.classList.contains("item-status-" + currentStatus)) {
         element.classList.remove("item-status-" + currentStatus);
         element.classList.add("item-status-" + newStatus);
@@ -248,19 +253,28 @@ function toggleBookmark(parentElement, toasting) {
 
     let request = new RequestBuilder(element.dataset.bookmarkUrl);
     request.withCallback(() => {
-        if (element.dataset.value === "star") {
-            element.innerHTML = '<span class="icon-label">' + element.dataset.labelStar + '</span>';
-            element.dataset.value = "unstar";
+
+        let currentStarStatus = element.dataset.value;
+        let newStarStatus = currentStarStatus === "star" ? "unstar" : "star";
+
+        let icon, label;
+
+        if (currentStarStatus === "star") {
+            icon = document.querySelector("template#icon_star");
+            label = element.dataset.labelStar;
             if (toasting) {
                 toast(element.dataset.toastUnstar);
             }
         } else {
-            element.innerHTML = '<span class="icon-label">' + element.dataset.labelUnstar + '</span>';
-            element.dataset.value = "star";
+            icon = document.querySelector("template#icon_unstar");
+            label = element.dataset.labelUnstar;
             if (toasting) {
                 toast(element.dataset.toastStar);
             }
         }
+
+        element.innerHTML = icon.innerHTML + '<span class="icon-label">' + label + '</span>';
+        element.dataset.value = newStarStatus;
     });
     request.execute();
 }