Accordeon button with svg not changing plus to minus and contrary while collapsing - svg

Question

I need to change plus to minus (contrary too) while collapsing accordeon tab which is written with svg.
When I click on tab, tab collapses, but plus not changing to minus, and minus to plus.
Here is html code:
<div class="accordion pt-2 w-100" id="myAccordion">
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<button type="button" class="accordion-btn collapsed btn text-left p-2 btn-light btn-block" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="false" aria-controls="accordion-1" style="overflow-anchor: none;">
<svg viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="plus square" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus-square text-dark b-icon bi">
<g transform="translate(8 8) scale(0.8 0.8) translate(-8 -8)">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
</g>
</svg>
<span class="ml-1 h4 text-dark">Tab1</span>
</button>
</div>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit
</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<button type="button" class="accordion-btn collapsed btn text-left p-2 btn-light btn-block collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="accordion-1" style="overflow-anchor: none;">
<svg viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="plus square" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus-square text-dark b-icon bi">
<g transform="translate(8 8) scale(0.8 0.8) translate(-8 -8)">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
</g>
</svg>
<span class="ml-1 h4 text-dark">Tab2</span>
</button>
</div>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit
</p>
</div>
</div>
</div>
</div>
Also here I have css code for accordeon:
.accordion-btn {
font-size: 24px;
}
.accordion-button::after {
position: absolute;
left: 0;
}
Thanks!