lalalalalalal.tsx

<RecommendationControl
  iconHover={faAngry}
  iconNonHover={faAngryRegular}
  title="I never want to hear this again!"
  action={() =>
    feedback === "hate"
      ? this.deleteFeedback("Like", faThumbsUpRegular)
      : this.submitFeedback("hate", faAngry, "hate")
  }
  classNameHover="on"
  classNameNonHover="off"
/>

const RecommendationControl = (props: RecommendationControlProps) => {
  const { classNameHover, iconHover, classNameNonHover, iconNonHover, action, title } = props;
  return (
    <div className='recommendation-icon' title={title}
    onClick={action}><span>
    <FontAwesomeIcon
      icon={iconHover as IconProp}
      className={classNameHover}
    /></span>
    <span>
    <FontAwesomeIcon
      icon={iconNonHover as IconProp}
      className={classNameNonHover}
    /></span>
    </div>
  );
};

.recommendation-icon:hover .off,
  .recommendation-icon .on {
    display: none;
  }
  .recommendation-icon:hover .on {
    display: inline;
  }