In your case you need to do like this

Hope this will help you

function myFunction(x) {
   x.classList.toggle("bi-caret-right-fill"); 
   x.classList.toggle("bi-arrow-down-circle"); 
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<i onclick="myFunction(this)" class="bi bi-caret-right-fill"></i>

Try this:

<i onclick="myFunction(this)" class="bi bi-caret-right-fill"></i>

function myFunction(x) {
  if (x.classList.contains("bi-caret-right-fill")) {
    x.classList.remove("bi-caret-right-fill");
    x.classList.add("bi-arrow-down-circle");
  } else if (x.classList.contains("bi-arrow-down-circle")) {
    x.classList.add("bi-caret-right-fill");
    x.classList.remove("bi-arrow-down-circle");
  }
}