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

mac.wierda@dataworld.ai priority asked 7 months 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 7 months ago

See down below :)


drimaco free answered 7 months ago


.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 7 months ago

This should work!


mac.wierda@dataworld.ai priority commented 7 months ago

Works perfectly, thanks!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: 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