Remove little arrow from ngbDropdownToggle

user_635610 0
Viewed 184

How do I remove/hide the little arrow to the right of an icon from ngbDropdownToggle in ng-bootstrap?

Followed examples: https://ng-bootstrap.github.io/#/components/dropdown/examples

My code:

<ul class="navbar-nav ml-1">
  <li ngbDropdown class="nav-item">
    <a class="nav-link" ngbDropdownToggle>
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
        <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
      </svg>
    </a>
  </li>
</ul>

Thank you.

ng-bootstrap
1 Answers

First add a custom class or id to the element with the ngbDropdownToggle. Than you can add this CSS.

.custom-class-or-id:after {
    content: none !important;
}

This will remove the ,,auto-added'' arrow icon.

user_121505240
Related