Topic: Change the icon of dropdown

Palak@tru free asked 3 years ago


https://mdbootstrap.com/docs/react/components/dropdowns/ 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 {
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem,
  MDBIcon
} from 'mdbreact';

const DropdownPage = () => {
  return (
    <MDBDropdown>
      <MDBDropdownToggle color='primary'>
        With My custom Icon <MDBIcon fab icon='angellist' className='ml-2' />
      </MDBDropdownToggle>
      <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>
      </MDBDropdownMenu>
    </MDBDropdown>
  );
};

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.

FREE CONSULTATION

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

Status

Answered

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