Button with SVG Base64 image and rollover

<!DOCTYPE html>
<html>
<head>
<style>

:root {
  --iconwhite:  url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfNl9jb3B5IiBkYXRhLW5hbWU9IkxheWVyIDYgY29weSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNzguMTIiIGhlaWdodD0iNzguMTIiIHZpZXdCb3g9IjAgMCA3OC4xMiA3OC4xMiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTkwLDg4LjI1SDc4LjgxTDUwLjkxLDYwLjcsMjMuMzUsODguMjVIMTEuODVWNzcuMDlMMzkuNCw0OS4xOSwxMS44NSwyMS42NFYxMC4xM2gxMS41TDUwLjkxLDM3LjY4bDI3LjktMjcuNTVIOTBWMjEuNjRMNjIuNDEsNDkuMTksOTAsNzYuNzRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTEuODUgLTEwLjEzKSIvPjwvc3ZnPg==")
}

/*  CONVERT SVG AND PNGS HERE:::: https://image2base64.online/   */

body{
    font-family: Arial, Helvetica, sans-serif;
}

.btn-svg-icon{
    background-image: var(--iconwhite), linear-gradient(#dd0000, #990000);
    background-position: center center, left top;
    background-repeat: no-repeat, no-repeat;
    background-size: 11px 11px, 100%;
    color:transparent;
    width:20px; max-width: 20px;  min-width: 20px;
    height:20px; max-height: 20px;  min-height: 20px;
    border:1px solid  #660000;
    cursor: pointer;
}
.btn-svg-icon:hover{background-image: var(--iconwhite), linear-gradient(#ff0000, #cc0000);border-color: #880000;}

</style>
</head>
<body>

 <button class="btn-svg-icon" title="Icon Button Title"></button>

</body>
</html>