0

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!

Exdefoot
  • 77
  • 6
  • This seems to be a React app using custom components from some library? –  Apr 24 '19 at 12:56
  • Hi Chris, I haven't heard of React until now and I believe it is one indeed., Should I change my request and tag it as a React subject? Sorry I'm pretty new here... – Exdefoot Apr 24 '19 at 13:17
  • font-awesome is a css library - you will have to put the link for the font-awesome css library in the head section of your code, e.g; `` (that's not the latest version though.. you can find it online) – Rachel Gallen Apr 24 '19 at 13:24
  • In order to change the icon you ideally have to change the React source code. You can in theory change the built JS file manually, but when somebody changes the React source and rebuilds it, those changes will be gone again. –  Apr 24 '19 at 13:34

2 Answers2

0

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?

VikrantGharat
  • 229
  • 1
  • 4
0

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.

Exdefoot
  • 77
  • 6