Clarity: Clarity Icons inside clr-dropdown-menu

[ninodinatale]

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[ ] enhancement
[x] question

Expected behavior

I want to have Clarity Icons inside my <clr-dropdown-menu> but somehow, it does not seem to work.

I'm aware that I may be doing something wrong, but I couldn't find any examples with icons inside a dropdown menu, although I'm sure I have seen one some time ago.

Actual behavior

plunker: https://plnkr.co/edit/hSivYXxBuNViCRFoNBC6

May someone help me with this?

[adityarb88]

@ninodinatale: This is actually an issue with Dropdowns in Headers. We need to fix our Header CSS to get this resolved. If you use icons in dropdown items anywhere else in the application, it should work as expected: https://plnkr.co/edit/hSivYXxBuNViCRFoNBC6?p=preview

I think there was an issue filed for this a while back. I cant find it right now so I will keep this open too. Thanks for reporting this!

[ninodinatale]

@adityarb88 Thank you. Is there some kind of a workaround or is it currently not possible to display icons in a header dropdown?

[adityarb88]

This is a CSS issue so the workaround is that you might have to override the CSS to make sure that the icons are rendered properly in the header dropdown. May be temporarily add a separate class to that dropdown and target the icons under it?

[ninodinatale]

Did not meant to be lazy, I just hoped someone already did it and I could copy & paste ;-)

Quick and dirty fix which worked for me if anyone is interested:

HTML

  <clr-dropdown-menu class="dropdown-icon-fix" clrPosition="bottom-right" *clrIfOpen>
    <a clrDropdownItem>
      <clr-icon shape="users"></clr-icon>
      User
    </a>
    <a clrDropdownItem>
      <clr-icon shape="flag"></clr-icon>
      Language
    </a>
    <a  clrDropdownItem>
      <clr-icon shape="logout"></clr-icon>
      Log out
    </a>
  </clr-dropdown-menu>

CSS

.dropdown-icon-fix > a {
padding-left: 2.9em;
}

.dropdown-icon-fix > a > clr-icon {
top: inherit !important;
margin-top: 1em;
left: 0.9em;
}

[aditorium]

Thanks for the workaround @ninodinatale, I stumbled upon the same issue.

[Shijir]

Closing this issue as this looks like no longer an issue with the latest Clarity versions: https://stackblitz.com/edit/clarity-light-dropdown-v2.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.