Topic: Change the icon of dropdown

Palak@tru free asked 3 years ago In this dropdown component, I want to provide my own image in place of the drop-down icon provided by the library . I want to provide the file path from the project to the icon. Also, I have asked about providing a file path to MDBIcon earlier, which hasn't been answered yet . How to achieve that?

Konrad Stępień staff answered 3 years ago

Hi @Palak@tru,

Can you test my code?

import React from 'react';
import {
} from 'mdbreact';

const DropdownPage = () => {
  return (
      <MDBDropdownToggle color='primary'>
        With My custom Icon <MDBIcon fab icon='angellist' className='ml-2' />
      <MDBDropdownMenu basic>
        <MDBDropdownItem><MDBIcon fab icon='angellist' className='ml-2' /></MDBDropdownItem>
        <MDBDropdownItem>Another Action <MDBIcon fab icon="angrycreative" /></MDBDropdownItem>
        <MDBDropdownItem>Something else here <MDBIcon icon="award" /></MDBDropdownItem>
        <MDBDropdownItem divider />
        <MDBDropdownItem>Separated link</MDBDropdownItem>

export default DropdownPage;

It looks like this Dropdown with iscons

Why you need path to MDBIcon file?

If you don't know how to use MDBIcon please check this documentation and here you can find a list of icons. Can you also send me a link to your issue with the icons?

Best regards, Konrad.

Palak@tru free commented 3 years ago

I want to add an image of the icon from the third library, the path of which is stored in my asset folder . Generally, it is working when I use the icon from the MDB library. But I want to provide the path from my folder . How to achieve that?

Konrad Stępień staff commented 3 years ago

Did you check my answer in this issue, Provide file path to icon?

I think the easiest way to add own custom icon to button or something is to add this with css styles and background-image property.

Please refer to the above problem. I think the way is right for your needs.

Best regards, Konrad.

Palak@tru free commented 3 years ago

Sorry, my bad! I didn't get the notification for that answer. I will check it and let you know. Thank you :)

Konrad Stępień staff commented 3 years ago

Haha, no problem, @Palak@tru. :)

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards, Konrad.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.19.0
  • Device: MacBookAir
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: Yes