Modifying checkbox and footer to use an 'images' subdirectory with a relative path

src/checkbox/_checkbox.scss

@@ -110,18 +110,18 @@ $checkbox-ripple-size: $checkbox-label-height * 1.5;
   left: 0;
   height: 100%;
   width: 100%;
-  mask: url("../checkbox/tick-mask.svg#mask");
+  mask: url("images/tick-mask.svg#mask");
 
   background: transparent;
   @include material-animation-default(0.28s);
   transition-property: background;
 
   .wsk-checkbox.is-checked & {
-    background: $checkbox-color url("../checkbox/tick.svg");
+    background: $checkbox-color url("images/tick.svg");
   }
 
   .wsk-checkbox.is-checked.is-disabled & {
-    background: $checkbox-disabled-color url("../checkbox/tick.svg");
+    background: $checkbox-disabled-color url("images/tick.svg");
   }
 }
 

src/footer/_mega_footer.scss

@@ -1,4 +1,5 @@
 @import "../colors";
+@import "../icons/icons";
 
 /**************
  *
@@ -143,7 +144,8 @@ $footer-btn-size: 36px  !default;
   opacity: 0;
 
   &~.wsk-mega-footer--heading:after {
-    background-image: url('images/up_arrow.svg');
+    @include wsk-icon();
+    content: $icon-expand-less;
   }
 }
 
@@ -153,7 +155,8 @@ $footer-btn-size: 36px  !default;
   }
 
   &~.wsk-mega-footer--heading:after {
-    background-image: url('images/down_arrow.svg');
+    @include wsk-icon();
+    content: $icon-expand-more;
   }
 }
 

src/footer/images/down_arrow.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" fill="#E2E2E2"/>
-    <path d="M0-.75h24v24h-24z" fill="none"/>
-</svg>

src/footer/images/up_arrow.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M7.41 15.41l4.59-4.58 4.59 4.58 1.41-1.41-6-6-6 6z" fill="#E2E2E2"/>
-    <path d="M0 0h24v24h-24z" fill="none"/>
-</svg>