What's wrong with this sprite?

Question

css

Something doesn't work with the sprite
Trying to pick up the background-position - nothing is visible

.icon {
  background-repeat: no-repeat;
  background-image: url('http://krona.mosco-web.ru/sprite.svg');
  background-size: 700px 194px;
  display: inline-block;
}

.icon--hamburger {
  background-position: 0 0;
  width: 21px;
  height: 17px;
}

<i class="icon icon--hamburger"></i>

sandbox - https://codepen.io/dagman/pen/EJZXzX

Maybe the designer didn't form the sprite correctly?

Answer 1

invalid background-position
https://codepen.io/anon/pen/MRJENd

Answer 2

svg sprites are used wrong.
https://css-tricks.com/svg-symbol-good-choice-icons/
in use xlink:href="#shape-icon-1" specify a link to the sprite with id