Implement hover background for close

Using CSS background property, the circle on hover is slightly
misaligned. To workaround that, an SVG circle is used as background
image. The circle is then moved slightly down to be centered around
the X.

material-ui/material-ui.scss

@@ -26,7 +26,6 @@ $swal2-actions-justify-content: flex-end;
 
 // CLOSE BUTTON
 $swal2-close-button-border-radius: 50%;
-$swal2-close-button-hover-background: rgb(242, 242, 242);
 $swal2-close-button-hover-color: $swal2-close-button-color;
 
 @import '~sweetalert2/src/sweetalert2';
@@ -38,6 +37,15 @@ $swal2-close-button-hover-color: $swal2-close-button-color;
   }
 }
 
+.swal2-close {
+  &:hover {
+    background-image: url('data:image/svg+xml;charset=US-ASCII,' + '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%20%3Ccircle%20fill%3D%22rgb%28242%2C242%2C242%29%22%20cx%3D%225%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3C%2Fsvg%3E');
+    background-repeat: no-repeat;
+    background-position: left 50% top 115%;
+    background-size: 1.1em auto, 100%;
+  }
+}
+
 .swal2-select {
   background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
   background-repeat: no-repeat, repeat;