<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-cart" viewBox="0 0 16 16">
<title>cart</title>
<path class="path1" d="M6 14.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
<path class="path2" d="M16 14.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
<path class="path3" d="M16 8v-6h-12c0-0.552-0.448-1-1-1h-3v1h2l0.751 6.438c-0.458 0.367-0.751 0.93-0.751 1.562 0 1.105 0.895 2 2 2h12v-1h-12c-0.552 0-1-0.448-1-1 0-0.003 0-0.007 0-0.010l13-1.99z"></path>
</symbol>
<symbol id="icon-phone" viewBox="0 0 16 16">
</defs>
</svg>

<p>Example 5: Linked Icon, with dynamic text</p>
<div class="icon">
    <a href="http://example.com" id="cart">
      <span id="itemsInCart">8</span>
      <span class="offscreen-text">items in your shopping cart</span>
      <svg aria-hidden="true">
      <use xlink:href="#icon-cart"></use>
    </svg>
  </a>
</div>
body{
  font-size: 30px;
  font-family: Helvetica, Arial;
  color: #444;
}
.icon{
	display: inline-block;
	margin:.5em;
  color: rebeccapurple;
  fill: rebeccapurple;
}
.icon svg {
	width: 1em;
	height: 1em;
}
a{
  color: blue;
  fill: blue;
  text-decoration: none;
  padding: 5px;
}
a:focus, a:hover{
  background: lightgray;
  outline: 3px solid blue; 
}
.success{
  color: green;
  fill: green;
}
#cart{
  position: relative;
}
#itemsInCart{
  font-size: .5em;
  padding: 0 2px;
  font-weight: bold;
  border: .2em solid lightgray;
  border-radius: 30%;
  background: lightgray;
  position: absolute;
  top: -10px;
  right: 2px;
}
.offscreen-text{
  position: absolute!important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  clip-path: polygon(0 0,0 0,0 0,0 0);
}

@media screen and (-ms-high-contrast: active) {
  .icon svg{
    fill: green;
  }
}

@media screen and (-ms-high-contrast: black-on-white) {
   .icon svg{
    fill: #333;
  }
}
@media screen and (-ms-high-contrast: white-on-black) {
 .icon svg{
    fill: #fff;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.