Change border color of an icon inside a button

Question

I am trying to create a button that contains an icon and a text. The icon is an SVG image. How can I change the color border of this icon to be the same as the button text?

I am using Bootstrap, JSFiddle

 @import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'; .icon { background: url(https://image.flaticon.com/icons/svg/20/20061.svg) no-repeat 5px center; float: left; padding-left: 60px; } 

 <div class="submitbtn"> <input class="btn btn-outline-info btn-lg icon" id="submit" name="submit" type="submit" value="Send"> </div> 

Answer 1

Instead of using the SVG as a background, use the inline SVG code. You can then target the fill (or stroke) of the SVG using a class in CSS.

<div class="submit-btn">
  <svg class="svg-outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 485.411 485.411" style="enable-background:new 0 0 485.411 485.411;" xml:space="preserve">
    <g>
      <path d="M0,81.824v321.763h485.411V81.824H0z M242.708,280.526L43.612,105.691h398.187L242.708,280.526z    M163.397,242.649L23.867,365.178V120.119L163.397,242.649z M181.482,258.533l61.22,53.762l61.22-53.762L441.924,379.72H43.487   L181.482,258.533z M322.008,242.655l139.535-122.536v245.059L322.008,242.655z" />
    </g>
  </svg>
  Send
</div>

<style>
  .submit-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.25em;
    color: #fff;
    background: #17a2b8;
    transition: 250ms ease;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 5px 15px;
  }

  .svg-outline {
    stroke: orange;
    fill: #fff;
    height: 45px;
    width: auto;
    transition: fill 250ms ease;
    margin-right: 5px;
  }

  .submit-btn:hover {
    background: #fff;
    color: #17a2b8;
    border: 1px solid #17a2b8;
  }

  .submit-btn:hover .svg-outline {
    fill: #17a2b8;
  }
</style>