When trying to insert the svg to my page from the sprite sheet, the imbedded svg isn't placed at the center even after the properties to center it is applied. I am still a bit confused about this way of imbedding the svg and the role played by both viewport and viewbox.

// HTML

// CSS
.card__icon {
  width:4rem;
  height:4rem;
  display:flex;
  justify-content:center;
  align-items:center;
}
// Sprite sheet