Add image into list through SVG - html

Question

I am trying to get this working for the contact area: http://jsfiddle.net/y8zx3/
CSS:
#container #sidebar ul.kontakt { list-style: none }
#container #sidebar ul.kontakt li {
/* display: block; */
line-height: 70px;
margin-right: 50px;
float: right;
display: list-item;
}
#container #sidebar ul.kontakt li svg {
/* position: relative;;*/
float: left;
}
#container #sidebar ul.kontakt li a {
/* display: block; */
line-height: 70px;
margin: 0;
float: right;
}
HTML:
<h1>Kontakt</h1>
<p>Schön, das Sie uns kontaktieren wollen. Sie können uns entweder per Kontaktformular erreichen, oder ganz traditionell per Telefon, Email oder Fax.</p>
<ul class="kontakt">
<li>
<svg height="50px" id="Layer_1" style="enable-background:new 0 4 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
<g>
<polygon points="448,384 448,141.8 316.9,241.6 385,319 383,321 304.1,251.4 256,288 207.9,251.4 129,321 127,319 195,241.6 64,142 64,384 " />
<polygon points="439.7,128 72,128 256,267.9 " />
</g>
</svg>info#immobilienverwaltung-buerk.de
</li>
<li>[phone]
<li>[phone]</li>
<li>[phone]</li>
</ul>
I want the email icon to be at the left of the list, but dont want to do this using css background-image. How could I achieve this? right now the image is above the li and not in front. Btw the icon is an inline SVG. See http://jsfiddle.net/y8zx3/ for full co

Answer 1

I did a little bit of CSS editing using Chrome's Developer Tools (Very Useful!)
/* On #container #sidebar ul.kontakt li */
width: 100%;
text-align: right;
/* On #container #sidebar ul.kontakt li svg */
margin: 10px 0 0 10px;
Is this what you are looking for? http://jsfiddle.net/bnkAL/
Edit #1
Set the width of the SVG from 512px to 50px ... The SVG is expanded past the <li>, pushing the <a> tag down.
...viewBox="0 0 512 512" width="50px" x="0px"...