fixed icon links bug (mask not working every where)

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -1926,7 +1926,7 @@ footer{
   }
 
   $icons_w:20px;
-  @mixin iconlinkblock($bgimgurl) {
+  @mixin iconlinkblock($bgimgurl, $bgimgurlactive) {
     pointer-events: all;
     margin-left: 0.5em;
     // @include btn;
@@ -1938,26 +1938,30 @@ footer{
       text-indent: $wh*2;
       margin: 0;
       overflow: hidden;
-      mask-image: $bgimgurl;
-      mask-size: contain;
-      background-color: #000;
-      transition: background-color 0.3s ease-in-out;
+      // mask-image: $bgimgurl;
+      // mask-size: contain;
+      // background-color: #000;
+      // transition: background-color 0.3s ease-in-out;
+      background-image: $bgimgurl;
+      background-repeat: no-repeat;
+      background-size: contain;
       cursor: pointer;
-      &.is-active{
-        background-color: red;
+      &:hover, &.is-active{
+        // background-color: red;
+        background-image: $bgimgurlactive;
       }
     }
   }
 
   .block.random-player{
     margin-bottom: 1em;
-    @include iconlinkblock(url(../img/random.svg));
+    @include iconlinkblock(url(../img/random.svg), url(../img/random-active.svg));
   }
 
   #block-studiolinkblock{
     margin-bottom: 1em;
     margin-left: 0.2em;
-    @include iconlinkblock(url(../img/studio.svg));
+    @include iconlinkblock(url(../img/studio.svg), url(../img/studio-active.svg));
   }
 
   #block-userlogin{
@@ -2033,7 +2037,7 @@ footer{
 
   #block-edlpsearchlinkblock{
     margin-bottom: 1em;
-    @include iconlinkblock(url(../img/search.svg));
+    @include iconlinkblock(url(../img/search.svg), url(../img/search-active.svg));
     margin-left: 0.2em;
   }