Vue Js Change Button Color and Icon on click

<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
  <div id="app">
    <h3>Vue Js Cange Button Color and Icon on click</h3>
    <button :class="{ 'active': isActive }" @click="isActive = !isActive">
      <i :class="isActive ? 'fa fa-check' : 'fa fa-times'"></i>
    </button>
  </div>

/* Styles for the active state of the button */
    button.active {
      background-color: #00aaff;
      color: #fff;
    }

/* Styles for the button icon */
    i {
      display: inline-block;
      width: 16px;
      height: 16px;

/* Add additional styling for the icon as needed */
    }
  </style>

</body>

</html>