如何在按钮中更改图标的颜色？

<button class="icon-button">
  <i class="icon"></i>
</button>

.icon-button .icon {
  color: red;
}

<button class="icon-button">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z"/>
  </svg>
</button>

<button class="icon-button">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red">
    <path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z"/>
  </svg>
</button>

<button class="icon-button">
  <i class="fas fa-heart"></i>
</button>

.icon-button .fa-heart {
  color: red;
}