mdb5-react cannot change dropdown-toggle icon from caret

Topic: mdb5-react cannot change dropdown-toggle icon from caret

mac.wierda@dataworld.ai priority asked 2 years ago

Expected behavior Using mdb5-react-ui-kit-pro-essential I expect to be able to change the MDBDropdownToggle downward-facing caret icon to something different.

Actual behavior I can add text or an icon before it, but the caret does not get removed.

Resources (screenshots, code snippets etc.)

<MDBNavbarNav className="justify-content-end">
      <MDBDropdown>
        <MDBDropdownToggle>
          With custom icon? <MDBIcon fas icon="bars" />
        </MDBDropdownToggle>
        <MDBDropdownMenu>
          <MDBDropdownItem>
            <MDBDropdownLink tag="button" type="button">
              Item 1
            </MDBDropdownLink>
          </MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>
    </MDBNavbarNav>

Screenshot: dropdown_caret_unchanged

drimaco free commented 2 years ago

See down below :)

Add comment

drimaco free answered 2 years ago

1 0 Best answer

.caret-off::after, .caret-off::before {
    display: none !important;
}

<MDBDropdownToggle className="caret-off">
    With custom icon? <MDBIcon fas icon="bars" />
</MDBDropdownToggle>

Wojciech Staniszewski staff commented 2 years ago

This should work!

mac.wierda@dataworld.ai priority commented 2 years ago

Works perfectly, thanks!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB React
MDB Version: MDB5 3.0.0
Device: Laptop
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

mac.wierda@dataworld.ai

20Support score
7Questions 2Answers 0Snippets