Tips for swapping out an SVG icon with a font-based icon like Font Awesome or Ion

I have a dropdown menu that displays an SVG icon, while all the other menus show a button with a font-based icon (ion-icon). I want all the dropdown menus to have a consistent look.

I've attempted to adjust the CSS code and searched through various .js and .php files, but unfortunately, nothing has been successful so far.

Here is the code for 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;
}

And here is the code for 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 view the current result in action (dropdown "Thème de la séance") versus the expected result (all other dropdowns) on this .

Thank you for your assistance!

htmlcssreactjssvg

Answer №1

Transform your SVG icon file into a Font-based icon with ease

  1. Import your Icons
  2. Select the icons you wish to convert
  3. Click on generate font

For detailed instructions, visit: How to convert .svg files to a font?

Answer №2

After much trial and error, I finally discovered a solution to execute the trick.

Conceal the svg:

svg.dd__expandIcon {visibility:hidden;}

Integrate a background image into the selectbox

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

Perhaps not the conventional method, but as mentioned, it gets the job done.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Safari iOS does not display any background for Buttons

Encountering an unusual problem with buttons on iOS devices specifically in Safari browser - the background color isn't being applied like it is on Desktop and Android devices. Here are the CSS properties for the button: export const Button = styled.b ...

cssreactjssafarimobile-safari

Guide to testing Higher Order Components with React Testing Library

I've created a higher-order component (HOC) that adds props to a component for handling network requests and passing down data as props. Below is a simplified version of the HOC: export const withTags = (Component) => { class WithTags extends Pur ...

javascriptreactjsreact-testing-libraryhigher-order-components

The HTML retrieved cannot be accessed by external JavaScript code

I've encountered a major issue. I'm using ajax to retrieve content in HTML format, but my main JavaScript file is unable to manipulate any retrieved elements - tags, classes, IDs, you name it. Is this normal? How can I work with the data once it& ...

jqueryhtml

Tips for layering icons behind others in MUI

Currently, I am utilizing material-ui for react components. This is the snippet of code I am working with: <Autocomplete multiple options={['One','Two','Three']} value={value} getOptionLabel={(option) => ...

reactjsmaterial-ui

Retrieve the chosen text from the dropdown menu with AJAX

Could someone assist me with converting PHP code to Ajax? Here is the HTML Code: <form method="POST" > <label for="Manufacturer"> Manufacturer : </label> <select id="cmbMake" name="Make" onchange="document.getElementB ...

phpjqueryhtmlajax

JQuery Anchor Link Scrolling Problem on Specific Devices

I'm having an issue where my webpage does not scroll correctly to an anchor when a link is clicked. The problem arises from the header size changing based on the viewport width. While it works fine in desktop Chrome, in the mobile version the header h ...

javascriptjqueryhtmlcss

Is there a way to eliminate the transform style from a draggable element?

I am looking to enhance the CDK drag and drop example by adding a preview of the dragged element with specific left and top positions, without utilizing the transform style. HTML <div class="example-boundary"> <div class="example- ...

javascriptcssnode.jsdraggableangular13

Error: The argument 'IParams' is not compatible with the parameter type 'IParams' in Typescript with NextJS14

I encountered an error in my code while using Prisma with Next.js 14 and TypeScript. The issue arises when trying to load product details via product ID. The error is captured in the screenshot below. Failed to compile. ./app/product/[productId]/page.tsx:1 ...

reactjstypescriptnext.jsparameters

Show off a font-awesome icon overlapping another image

My task involves fetching image source from a JSON file and then displaying it on an HTML page. https://i.sstatic.net/coOaU.png I also need to overlay a Font Awesome icon on top of the image as shown below: https://i.sstatic.net/nbrLk.png https://i.sst ...

javascriptjqueryhtmlcssjson

Encountering a NextJS error when attempting to access a dynamic route

I am currently working on a Next.js application that involves dynamic routing. I have encountered an error message stating: Error: The provided path X0UQbRIAAA_NdlgNdoes not match the page:/discounts/[itemId]`.' I suspect that the issue may be relat ...

javascriptreactjsroutesnext.js

Bootstrap-tour is incompatible with a row within a table structure

Is there a way to highlight a table row effectively? I've been struggling with it and tried using the fix mentioned in this bootstrap-tour issue here Check out this demonstration on jsFiddle: jsFiddle JAVASCRIPT $("#dialog").dialog(); var t = new ...

javascriptcsstwitter-bootstrapz-indexbootstrap-tour

What could be causing the malfunction of the Carousel Slide feature in my code?

I have encountered an issue while trying to implement the Bootstrap code below. It seems to only display the first slide and does not progress to the next one. I am unsure of what might be causing this problem. Can anyone help me troubleshoot? <secti ...

htmlbootstrap-5

Using React higher-order components in a straightforward scenario: The function does not return a valid React element (React.isValidElement(H) is false)

Here is a straightforward index.jsx file. Towards the end, in Workspace's render() function, {C} gets rendered. In Workspace's render method, C (the child component) is rendering while the wrapper isn't. The console.log output indicates.. ...

reactjs

How to change the date value in an HTML input field of type date using JavaScript

Struggling with manipulating an HTML date input type using javascript? You're not alone. The common approach to manipulating the date is like this: var c = new Date(); c.setDate(c.getDate() + 1); You can get the date from the input element: c = do ...

javascripthtmldatedom

Why isn't my function being triggered by the Click event?

I can't figure out why the click event isn't triggering the btn() function. function btn() { var radio = document.getElementsByTagName("input"); for (var i = 0; i > radio.length; i++){ if (radio[i].checked){ alert(radio[i].value); } ...

javascripthtml

After each animation in the sequence is completed, CSS3 looping occurs

I have currently set up a sequence of 5 frames, where each frame consists of 3 animations that gradually fade into the next frame over time. My challenge is figuring out how to loop the animation after completing the last sequence (in this case, #frame2). ...

javascriptcsscss-transitionscss-animations

Is it possible to customize the notification message displayed after clicking the save button in a listview within ng-admin?

While working on the listview/creation view, I am attempting to incorporate a custom notification message instead of the default one (please see the screenshot) that appears when the user clicks the save button. Is there a way for me to include a custom n ...

javascriptangularjshtmlng-admin

Guidelines for naming classes in scss when working with Next.js

Is it possible to use CSS naming conventions in SCSS files with Next.js and then import them into JavaScript using a different convention? // login.module.scss file: .login-button { // some scss styling } // Login.js file: import styles from './ ...

javascriptcssreactjssassnext.js

Ways to dynamically update the value of an object property within reactJS state

In the scenario where a component holds state like so: this.state = { enabled: { one: false, two: false, three: false } } What is the proper way to utilize this.setState() in order to set the value of a dynamic property? An attempt such ...

javascriptreactjsreact-native

The UseEffect function is displaying an inappropriate value, however, it only occurs once

My goal is to display the state value whenever the password is changed using the useEffect hook in React. It's working fine for the password, but the issue arises when I try to change the email. The console also renders the email value, which is not i ...

javascriptreactjsuse-effect