How to add svg icon to a button with a text

Question

I have a source of the svg icon svgIcon. I need to add this icon to the button. It would look very similar to this

I tried this:

css

  .btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-repeat: repeat-y;
       }

   <button class="btn"> Save</button>

But result is this:

How to have the svg icon inside the button and text description beside it?

Answer 1

I usually use the pseudo element. Please check the result below:

.btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
 }
 
 .btn:before {
   content: url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg);
   width: 20px;
   float: left;
   margin-right: 5px;
   margin-top: -2px;
 }

<button class="btn">Save</button>

Answer 2

Try to increase padding-left and set background-size of the icon. There is no need of background-repeat to repeat-y, use no-repeat instead.

.btn {
     border: none;
     color: grey;
     padding: 12px 16px 12px 36px; // Changed padding-left value, set as per your requirement
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-size: 25px auto; //Set as per your requirement
     background-repeat: no-repeat; // Changed
 }