JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class='container'>
  <h2 class='element string icon-before'>
    Added through string
  </h2>
  <h2 class=' element data icon-before' data-content="\f0c2">
    Added through dataset
  </h2>
  <a class='btn'>Press Me</a>
</div>

CSS

.container {
  display: grid;
  place-items: center;
  margin-top: 6rem;
  font-family: sans-serif;
  color: lightblue;
  gap: 1rem;
}

.btn {
  padding: 1em 2em;
  background-color: lightblue;
  color: white;
  border-radius: 10px;
}

.btn:hover {
  background-color: white;
  color: lightblue;
  border: 1px solid lightblue;
}

.icon-before::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-solid);
  margin-right: 0.2em;
}

.string::before {
  content: '\f0c2';
}

.data::before {
  content: attr(data-content);
}

JavaScript

const element = document.querySelector('.data');
const btn = document.querySelector('.btn');

const changeIcon = () => {
  element.dataset.content = '\\f185';
}

btn.addEventListener('click', changeIcon);