Transform svg after click (dropdown) using only html / css - html

Question

I'm having issues with this: I'm making sort of a tabs nav and I should accomplish the arrow down to go up on click, when the submenu is collapsed. I have the material icon, but the thing is I can only do it with html5 and css3
<nav class="nav my-4">
<li class="nav-link px-5 active fw-bold border-bottom border-2">
<a class="text-decoration-none small" href="#">Título 1</a>
</li>
<li class="nav-link px-5">
<a class="text-decoration-none text-grey-20 small" href="#">Título 2</a>
</li>
<li class="nav-link px-5">
<a class="text-decoration-none text-grey-20 small" href="#">Título 3</a>
</li>
<li class="nav-link px-5">
<a class="text-decoration-none dropdown dropdown-toggle small mw-ch-17" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Título 4
<!-- <span class="material-icons-outlined chevron-down">pand_more</span> -->
<svg .class="chevron-down" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.47146 0.294922L6.06146 4.87492L10.6515 0.294922L12.0615 1.70492L6.06146 7.70492L0.0614624 1.70492L1.47146 0.294922Z" fill="#666666"/>
</svg>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Ítem 1</a></li>
<li><a class="dropdown-item" href="#">Ítem 2</a></li>
<li><a class="dropdown-item" href="#">Ítem 3</a></li>
</ul>
</li>
<li class="nav-link px-2">
<a href="#" type="button">
<span class="material-icons text-grey-20">
keyboard_arrow_right
</span>
</a>
</li>
</nav>
This the CSS:
.mw-ch-17 {
max-width: 17ch;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.nav-link:hover {
background-color: #E7F0F4;
border-radius: 5px 5px 0 0;
}
.nav-link:active {
background-color: #CFE0E8;
border-radius: 5px 5px 0 0;
}
.dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: url("data:image/svg+xml,%3Csvg width='13' height='9' viewBox='0 0 13 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.09 8.20508L6.5 3.62508L1.91 8.20508L0.5 6.79508L6.5 0.795078L12.5 6.79508L11.09 8.20508Z' fill='%23000000'/%3E%3C/svg%3E");
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}
I was thinking maybe there's a way to change the fill color with CSS, but when I try with fill: black!important, doesn't work.
Expected: Arrow down at .collapse and arrow up at .collapse .show
And also change the font and icon color on hover and active