Caret change on collapse/expand using Bootstrap 4 css

I'm not sure why my caret isn't changing from down to right using CSS using Bootstrap 4 and CSS. I tried the .collapsed CSS property. Here is a codepen: https://codepen.io/xanabobana/pen/pobRxpx

And here is the code I'm trying: HTML:

<div class="accordion" id="accordionExample">
    <div id="headingOne">
        <button class="accordian-btn d-flex align-items-center" type="button">
        <div class="form-group form-check mb-0 mr-2">
            <input type="checkbox" class="form-check-input" id="Wildlife">
            <label class="form-check-label" for="Wildlife"><strong>Wildlife</strong></label>
        </div>
        <a href="#" data-toggle="collapse" data-target="#collapseWildlife" aria-expanded="false" aria-controls="Wildlife">
         <i class="fa fa-angle-right arrow-right"></i>
         <i class="fa fa-angle-down arrow-down"></i>
       </a>
       </button>
    </div>
   
    <div id="collapseWildlife" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="my-2">                                                                                                                    
            <button class="accordian-btn d-flex align-items-center" type="button">
                <div class="form-group form-check mb-1 ml-2 mr-2">
                    <input type="checkbox" class="form-check-input" id="">
                    <label class="form-check-label" for="">Mammal Biodiversity</label>
                </div>
                <a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseOne">
                    <i class="fa fa-angle-right arrow-right"></i>
                    <i class="fa fa-angle-down arrow-down"></i>
                </a>
           </button>
                                                                                                                        
           <button class="accordian-btn d-flex align-items-center" type="button">
                <div class="form-group form-check mb-1 ml-2 mr-2">
                    <input type="checkbox" class="form-check-input" id="">
                    <label class="form-check-label" for="">Bird Biodiversity</label>
                </div>
                <a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseOne">
                       <i class="fa fa-angle-right arrow-right"></i>
                       <i class="fa fa-angle-down arrow-down"></i>
                </a>
           </button>                                                                                                           </div>
                                                    

CSS:

.arrow-down{
    display: block;
}
.arrow-right{
    display: none;
}
.collapsed .arrow-right{
    display: none;
}
.collapsed .arrow-down{
    display: block;
}