<button class="button">
  <svg class="button__icon" viewBox="0 0 256 256">
    <polygon points="128,48.907 0,176.907 30.187,207.093 128,109.28 225.813,207.093 256,176.907"/>
  </svg>
</button>
<button class="button">
  <svg class="button__icon" viewBox="0 0 256 256">
    <polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/>
  </svg>
</button>
<button class="button">
  <svg class="button__icon" viewBox="0 0 256 256">
    <polygon points="225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093"/>
  </svg>
</button>
<button class="button">
  <svg class="button__icon" viewBox="0 0 256 256">
    <polygon points="207.093,30.187 176.907,0 48.907,128 176.907,256 207.093,225.813 109.28,128"/>
  </svg>
</button>

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    margin: 32px;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: #2e8b57;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15),
                0 4px 4px rgba(0, 0, 0, 0.1),
                0 8px 8px rgba(0, 0, 0, 0.05);
}

.button__icon {
    width: 16px;
    height: 16px;
    display: block;
    fill: #ffffff;
    transition: transform 0.125s ease-in-out;
}

.button__icon--rotated {
    transform: rotate(90deg);
}

/*
Vanilla JS
const buttons = document.querySelectorAll('.button');

for (const button of buttons) {
  const icon = button.querySelector('.button__icon');
  
  button.addEventListener('click', event => {
    event.preventDefault();
    
    icon.classList.toggle('button__icon--rotated');
  });
}
*/

$(document).ready(function () {
  $('.button').click(function () {
    $(this).find('.button__icon').toggleClass('button__icon--rotated');
  });
});