How do I change two different icon using input type button based on condition

I have one input type button where I have to toggle the value with different icon and text, for example when the value is yes it must have icon for YES with text, when the button value change to NO an icon change with text no next to it. I am failing change those icon based on condition, i have try to use CSS where my input I wrap it with and use it.

$('#yes').click(function(e) {
  if ($(this).val() == 'Yes') {
    $(this).val('No');
  } else {
    $(this).val('Yes');
  }
});

input[type="button"] {
  margin: 10px;
  padding-right: 30px;
}

span {
  position: relative;
}

span::after {
  font-family: 'Material Design Icons';
  content: "F0138";
  font-size: 13px;
  position: absolute;
  right: 20px;
  top: 1px;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span><input type="button" id="yes" value="Yes"/></span>