Как сверстать кнопку со стрелкой внутри?

.arrow { 
  position: relative; 
  width: 25px; 
  height: 25px; 
  border: 3px solid gray; 
  border-radius: 50%; 
} 
.arrow:after { 
  position: absolute; 
  top: 8px;; 
  left: 9px; 
  content: ''; 
  display: block; 
  width: 7px; 
  height: 7px; 
  border-left: 3px solid gray; 
  border-bottom: 3px solid gray; 
  transform: rotate(45deg); 
}

<div class="arrow"></div>

.arr { 
  display: inline-block; 
  width: 4em; 
  height: 4em; 
  border: 0.5em solid; 
  border-radius: 50%; 
  text-align: center; 
} 
 
.arr:after { 
  content: ''; 
  display: inline-block; 
  margin-top: 1.05em; 
  margin-left: 0.6em; 
  width: 1.4em; 
  height: 1.4em; 
  border-top: 0.5em solid; 
  border-right: 0.5em solid; 
  -moz-transform: rotate(-135deg); 
  -webkit-transform: rotate(-135deg); 
  transform: rotate(-135deg); 
}

<span class="arr"></span>

path, circle { 
  fill: none; 
  stroke: #000; 
  stroke-width:2; 
}

<svg viewBox="-15 -15 30 30" width="100" height="100"> 
 
  <circle r="10"></circle> 
  <path d="M2,6 L-5,0 L2,-6"></path> 
 
</svg>