Change the icon of dropdown

Topic: Change the icon of dropdown

Palak@tru free asked 4 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?

Add comment

Konrad Stępień staff answered 4 years ago

0 0 Best answer

Hi <a href="/profile/?id=66894" target="_blank" rel="nofollow">@Palak@tru</a>,

Can you test my code?

<pre class="prettyprint"><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;
</code></pre>

It looks like this <img src="https://usercontent.mdbootstrap.com/mdb-images/support/c1b96fce-b451-4dca-b84e-fc13985426d3-screenshot_4.jpg" alt="Dropdown with iscons" title="">

Why you need path to <code>MDBIcon</code> file?

If you don't know how to use <code>MDBIcon</code> please check this <a href="https://mdbootstrap.com/docs/react/content/icons-usage/" target="_blank">documentation</a> and <a href="https://mdbootstrap.com/docs/react/content/icons-list/" target="_blank">here</a> you can find a list of icons.
Can you also send me a link to your issue with the icons?

Best regards, Konrad.

Please insert min. 20 characters.

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 4 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 4 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 4 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 4 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Palak@tru

100Support score
14Questions 3Answers 0Snippets