Javascript 如何同时更改文本和svg的颜色？

如何同时更改SVG星形图标和文本的颜色？当我将鼠标悬停在各个部分上时，它会改变颜色。我不知道如何将两者都作为目标

我尝试在button标签中添加fill color和color属性，但似乎没有这样做

代码笔链接：

Html部分：

 <button class="btn"><span class="icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99993 15L5.10172 17.5751L6.0372 12.1209L2.07446 8.25819L7.55083 7.46243L9.99993 2.5L12.449 7.46243L17.9254 8.25819L13.9627 12.1209L14.8981 17.5751L9.99993 15Z" fill="#576B51"/>
</svg> </span>
  <span class="text">Button</span>
</button>

---

当我将鼠标悬停在按钮上时，我想更改svg的开始和文本颜色。

您可以更简单地使用

按钮：悬停路径，按钮：悬停

*{
填充：0px；
边际：0px；
}
.btn{
背景：线性梯度（180度，#FFFFFF 0%，#F1F5F0 100%）；
边框：1px实心#E4F0E1；
边界半径：4px；
利润率：100像素；
显示器：flex；
对齐项目：居中；
高度：32px；
光标：指针；
}
.图标{
填充：0px 8px 0px 8px；
}
.文本{
右边填充：8px；
}
/*我补充说*/
按钮：悬停路径，按钮：悬停{
填充：蓝色；
颜色：蓝色；
}

按钮

    *{
  padding: 0px;
  margin:0px;
}
.btn {
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F0 100%);
border: 1px solid #E4F0E1;
border-radius: 4px;
margin: 100px;
display: flex;
align-items: center;
height: 32px;
 cursor: pointer;

}
.icon {
  padding: 0px 8px 0px 8px;
}
.text {
   padding-right: 8px;
}
button:hover {
  color: blue;

}

button path:hover {
   fill: blue; 

}