JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <a href="#" class="link-3">
    <svg class="icon"><use xlink:href="#icon-copy"></use></svg>
    Lorem ipsum dolor sit amet, consectetur.
  </a>
</div>













<svg style="display:none">
  <symbol id="icon-copy" viewBox="0 0 32 32">
<title>copy</title>
<path d="M26.979 25.333h-15.334c-2.023 0-3.667-1.644-3.667-3.666v-18c0-2.023 1.644-3.667 3.667-3.667h11.344c1.316 0 2.605 0.533 3.535 1.465l2.656 2.656c0.945 0.945 1.465 2.201 1.465 3.536v14.010c0 2.023-1.644 3.666-3.666 3.666zM11.646 2c-0.919 0-1.666 0.748-1.666 1.667v18c0 0.919 0.748 1.666 1.666 1.666h15.334c0.919 0 1.666-0.748 1.666-1.666v-14.010c0-0.801-0.312-1.554-0.879-2.121l-2.656-2.656c-0.559-0.56-1.331-0.88-2.121-0.88z"></path>
<path d="M20.979 32h-16c-2.023 0-3.667-1.644-3.667-3.667v-21.333c0-2.023 1.644-3.667 3.667-3.667h0.667c0.552 0 1 0.448 1 1s-0.448 1-1 1h-0.667c-0.919 0-1.667 0.748-1.667 1.667v21.333c0 0.919 0.748 1.667 1.667 1.667h16c0.919 0 1.666-0.748 1.666-1.667v-0.666c0-0.552 0.448-1 1-1s1 0.448 1 1v0.666c0 2.023-1.644 3.667-3.666 3.667z"></path>
<path d="M24.313 11.333h-10c-0.552 0-1-0.448-1-1s0.448-1 1-1h10c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
<path d="M24.313 15.333h-10c-0.552 0-1-0.448-1-1s0.448-1 1-1h10c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
<path d="M24.313 19.333h-10c-0.552 0-1-0.448-1-1s0.448-1 1-1h10c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
</symbol>
</svg>

CSS

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  font-size: 24px;
  flex-shrink: 0;
  margin-right: 10px;
}
div {
  margin-bottom: 30px;
  max-width: 150px;
  padding:0 0 0 30px;
  position:relative;
}
a {
  text-decoration: none;
  border-bottom: 2px dashed;
  color: #000;
}
a:hover {
  border-color: transparent;
}
.link-3 .icon {
  display: inline-block;
  vertical-align: middle;
  left: 0px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}