Add an SVG as a Background Image

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <i class="Icon Icon--star"></i>
    <i class="Icon Icon--small Icon--star"></i>
  </body>

</html>

.Icon {
  width: 3em;
  height: 3em;
  display: inline-block;
}

.Icon--small {
  width: 2em;
  height: 2em;
}

.Icon--star {
  background-image: url("http://damonbauer.me/assets/images/implementing-svg/star.svg");
}

.Icon--star:hover {
  background-image: url("http://damonbauer.me/assets/images/implementing-svg/star_hover.svg");
  transition: background-image ease 0.2s
}





/* Demo only */
body {
  margin: 1em;
}