Change bootstrap icon by using onclick function

Question

I want to change the bootstrap icon bi bi-caret-right-fill to bi bi-caret-down-fill.

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

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

Answer 1

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/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<i onclick="myFunction(this)" class="bi bi-caret-right-fill"></i>

Answer 2

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");
  }
}