Html 如何在按钮中的文本旁边添加图标？

我想实现如图所示的按钮，但我不确定如何自信地做到这一点

我尝试过的代码如下所示：

        background-color: hsl(0, 0%, 48%);
        border-radius: 30px;
        text-align: center;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
      }

<button class="bookmark">
              <svg width="56" height="56" xmlns="http://www.w3.org/2000/svg">
                <g fill="none" fill-rule="evenodd">
                  <circle fill="#2F2F2F" cx="28" cy="28" r="28" />
                  <path fill="#B1B1B1" d="M23 19v18l5-5.058L33 37V19z" />
                </g></svg
              >Bookmark
            </button>

背景色：hsl（0,0,48%）； 边界半径：30px； 文本对齐：居中； 文字装饰：无； 利润：4倍2倍； 光标：指针； } 书签

---

这段代码得到了您想要的结果

.bookmark{
背景色：hsl（0,0,83%）；
边界半径：50px；
文本对齐：居中；
文字装饰：无；
利润：4倍2倍；
光标：指针；
显示器：flex；
对齐项目：居中；
大纲：无；
边界：无；
}
h1{
填充：0px 20px；
}
svg{
转换：比例（1.2）；
}

书签