Css 当鼠标悬停在封闭的div容器上时，如何更改图标颜色

我有一个div，它由一个图标和一些文本组成。我想保持图标的白色，并在指针悬停在根div顶部时将其更改为绿色。我如何才能做到这一点

组成部分：

function GroceryItem({ title }) {
    return (
        <div className="root">
            <div className="row-content">
                <FontAwesomeIcon icon={faPlusSquare} className="add-icon"/>
                <p>{title}</p>  
            </div>
        </div>
    )
}

我想如果我设置以下选项，就可以更改图标的颜色：

.root:hover {
  color: green
}

---

但这样做只会更改文本的颜色，而不会更改图标的颜色。

使用子代选择器，选择所有子代

.root:hover * {
  color: green
}

---

如果您只想更改图标的颜色，这将很有帮助

.root:hover svg {
  fill: green;
}

.root:hover svg {
  fill: green;
}