Hi Developers, 
I am trying to change the down icon in custom select (dropdown menu) in lwc to chevrondown icon but can't seem to change. Can someone please help me. Here is the code:

Component :
 <select class="c-select-menu" id="menu" onchange={doSomething}>
                    <option class="random" value="Make a selection">Make                       a selection </option>
                    <option class="random">&lt; 4'10" (147cm)</option>
                    <option class="random">4'11" (150cm)</option>
                    <option class="random">5'0" (152cm)</option>
                    <option class="random">5'1" (155cm)</option>
                    <option class="random">5'2" (157cm)</option>
                    <option class="random">5'3" (160cm)</option>
                    <option class="random">5'4" (163cm)</option>
                    <option class="random">5'5" (165cm)</option>
                    <option class="random">5'6" (168cm)</option>
                    <option class="random">5'7" (170cm)</option>
                    <option class="random">5'8" (173cm)</option>
                    <option class="random">5'9" (175cm)</option>
                    <option class="random">5'10" (178cm)</option>
                    <option class="random">5'11" (180cm)</option>
                    <option class="random">6'0" (183cm)</option>
                    <option class="random">6'1" (185cm)</option>
                    <option class="random">6'2" (188cm)</option>
                    <option class="random">6'3" (191cm)</option>
                    <option class="random">> 6'4" (193cm)</option> 
                </select> 
CSS :
.c-select-menu{
    background: #fff;
    position: relative;
    border-radius: 0;
    border: 1px solid #cfcfcf;
    min-width: 300px;
    margin-left: 32rem;
    margin-right: 32rem;
    padding-right: 2rem;
    padding-left: 1rem;
    height: 55px;
    font-size: 17px;
    font-family: sans-serif;
    color: #22426d;
    font-weight: 700;
    cursor: pointer;
}
.c-select-menu select{
    -webkit-appearance: none;
    background: #fff;
    text-indent: .01px;
    cursor: pointer;
    height: 55px;
    border-radius: 0;
    border: none; 
    padding: 17px 65px 17px 25px;
    color: #22426d;
    font-size: 17px;
    line-height: 20px;
    font-family: inherit;
    font-weight: 700;
    width: 100%;
}
.c-select-menu select:focus{
    outline: white;
    border-color: orange;
}
.slds-select_container::before{
    border-bottom: none;
}
.slds-select_container::after{ 
    border-top: none;
}
.slds-select_container .slds-select{
    width: 111%; 
    float: right;
    margin-top: -2rem;
    -webkit-appearance: none;
    background: transparent url("https://demo.cloudberryclient.com/lho-prediabetes/r4/assets/images/select-chevron.svg") no-repeat right;
}
.slds-select_container{
    position: relative;
    padding-left: 30px;
    padding-top: 0.8rem;
}