如何将 svg 图标添加到带有文本的按钮

Question

我有 svg 图标svgIcon 的来源。我需要将此图标添加到按钮上。它看起来与这个非常相似

我试过这个：

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>

但结果是这样的：

如何在按钮内放置 svg 图标并在其旁边放置文字说明？

Answer 1

我通常使用伪元素。请检查以下结果：

.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>