Topic: Vue3: Change icon for MMDBDropdown
Expected behavior Have a prop or slot to modify the material dropdown arrow (or not even show one).
Actual behavior Adding an icon in the slot only adds it to the button text. There is no method I could find to remove the material icon, nor modify it.
To work around this, I thought I could just add a regular button with @click, however that does not work either as the dropdown menu auto-closes immediately.
I also researched React MDB Support, and while I would expect MDB vue3 implementation to be similar, it seems to not work the same.
Resources (screenshots, code snippets etc.)
<MDBDropdown v-model="dropdown23">
<button @click="dropdown23 = !dropdown23">...</button>
<MDBDropdownToggle @click="dropdown23 = !dropdown23" slot="toggle">
<FontAwesomeIcon :icon="['fas', 'ellipsis']"></FontAwesomeIcon>
TEST<MDBIcon icon="mdb" iconStyle="fab" />
</MDBDropdownToggle>
<MDBDropdownMenu :animation="true" :fade-in="false" :dark="true">
<MDBDropdownItem tag="button">Add Dashboard Item</MDBDropdownItem>
<MDBDropdownItem tag="button">Another Action</MDBDropdownItem>
<MDBDropdownItem tag="button">Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
https://mdbootstrap.com/support/react/change-the-icon-of-dropdown/
Hello! The arrow in dropdown is beeing added via css. You can remove the icon by setting the display property of .dropdown-toggle::after element to none
.dropdown-toggle::after {
display: none;
}
You can also insert your own svg like this:
.dropdown-toggle::after {
border: none;
width: 15px;
height: 15px;
vertical-align: middle;
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>");
}
Hope that helps! Best Regards!
mrorabau pro premium priority commented 5 months ago
@Bartosz,
First, thanks for the quick response. The issue I have with this is that I believe it will change all of the dropdowns on the page. In this case there is only one on the page that I am attempting to change. If I provide the dropdown-toggle an element id, will #mytoggle::after{} work? (I'll try and test later today it if I don't hear back from you first).
Thanks!
mrorabau pro premium priority commented 5 months ago
Never mind. I tried it real quick with #mytoggle::after{ display: none; } and it worked. Thanks again!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 4.1.1
- Device: N/A
- Browser: chrome
- OS: Windows / Linux
- Provided sample code: No
- Provided link: Yes