How to replace an SVG icon with a font based icon (Font Awesome/Ion)?

Question

I'm having a dropdown list that shows an SVG icon whereas all the other ones show a button with a font-based icon (in this case ion-icon). Of course I want all dropdown lists to look the same.

I've tried modifying the CSS code and looked through some .js and .php files but nothing was successfull.

Code of the SVG icon

<svg class="dd__expandIcon" viewBox="0 0 9 15" width="9px" height="15px">
    <path d="M315,1318.04l-4.5,4.96-4.5-4.96,0.944-1.04,3.557,3.92,3.553-3.92,0.944,1.04m-9-5.08,4.5-4.96,4.5,4.96-0.944,1.04-3.557-3.92-3.553,3.92L306,1312.96" transform="translate(-306 -1308)"></path>
</svg>

.dd__expandIcon {
    width: 9px;
    height: 15px;
    flex-shrink: 0;
    fill: #bdbdbd;
    margin-left: 10px
}

Code of the ion-icon

<button type="button" class="reactiveToggleBtn___cQAWH">
    <i class="ion-chevron-down"></i>
</button>

.reactiveToggleBtn___cQAWH i {
    font-size: 13px;
    color: #484848;
}

You can directly see the actual result (dropdown "Thème de la séance") vs expected result (all other dropdowns) here: site

Thanks for your help!

Answer 1

I was finally able to find a way to make the trick.

Hide the svg:

svg.dd__expandIcon {visibility:hidden;}

Add a background image to the selectbox

.dd__selectControl {background: #f1f1f1 url('/wp-content/uploads/dropdown2.png') right no-repeat!important;}

Maybe not the proper way to do it but as said, it makes the trick.

Answer 2

You can convert SVG icon file into Font base icon using

https://icomoon.io/app

1. Import Icons
2. Select icons which you want to convert
3. Click on generate font

For more info check below link : How to convert .svg files to a font?