Fixed the weird merging of heart and explicit icons and made a few changes.

In this PR:
* The Explicit and Love icon(s) don't merge and are of same size
* Added Display of unlove icon as well in case song is not loved

Screenshots:

src/renderer/assets/feather/heart-fill.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

src/renderer/assets/feather/heart.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

src/renderer/less/elements.css

@@ -364,6 +364,21 @@
   align-items: center;
   justify-content: center;
 }
+.cd-mediaitem-list-item .heart-unfilled {
+  background-image: url("assets/feather/heart.svg");
+  height: 12px;
+  width: 36px;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
+
+.cd-mediaitem-list-item .heart-filled {
+  background-image: url("assets/feather/heart-fill.svg");
+  height: 12px;
+  width: 36px;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
 .cd-mediaitem-list-item .explicit-icon {
   background-image: url("assets/explicit.svg");
   height: 12px;
@@ -372,9 +387,7 @@
   background-repeat: no-repeat;
 }
 .heart-icon {
-  position: absolute;
+  display: flex
-  filter: contrast(0);
-  background-repeat: no-repeat;
 }
 @keyframes load-bar {
   10% {

src/renderer/less/elements.less

@@ -448,6 +448,22 @@
     justify-content: center;
   }
 
+  .heart-unfilled {
+    background-image: url("assets/feather/heart.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
+  }
+
+  .heart-filled {
+    background-image: url("assets/feather/heart-fill.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
+  }
+
   .explicit-icon {
     background-image: url("./assets/explicit.svg");
     height: 12px;
@@ -457,10 +473,7 @@
   }
 
   .heart-icon {
-    position: absolute;
+    display: flex
-    right:0;
-    filter: contrast(0);
-    background-repeat: no-repeat;
   }
 
   /* CSS.gg

src/renderer/views/components/mediaitem-list-item.ejs

@@ -65,8 +65,9 @@
                     </template>
                 </div>
             </div>
-            <div class="heart-icon" v-if="isLoved">
+            <div class="heart-icon">
-                <div class="svg-icon" :style="{'--url': 'url(./assets/feather/heart-fill.svg)'}"></div>
+                <div class="heart-unfilled" v-if="isLoved == false" :style="{'--url': 'url(./assets/feather/heart.svg)'}" />
+                <div class="heart-filled" v-if="isLoved == true" :style="{'--url': 'url(./assets/feather/heart-fill.svg)'}" />
             </div>
             <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"></div>
             <template v-if="showMetaData == true" @dblclick="route()">