Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Icon in Dropdown Menu Items
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.5.3
Environment
any
Reproduction link
Steps to reproduce
In a Dropdown overlay, add an icon and a label (text) to the Menu.Item content.
What is expected?
A margin between icon and label. There are other components where the proper margins are added to ‘.anticon’, like in:
.ant-tabs-tab .anticon.ant-menu-item .anticon.ant-menu-submenu-title .anticon
What is actually happening?
There is no margin
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
How to add icon inside drop-down list in CSS? - Stack Overflow
Hi I am developing Nav bar using Html and CSS. In right side I want to have icon in drop- ...
Read more >Drop down menu Icons & Symbols - Flaticon
584 drop down menu icons. Vector icons in SVG, PSD, PNG, EPS and ICON FONT.
Read more >Bootstrap Menu with icons - free examples & tutorial
Responsive Menu with icons built with Bootstrap 5. Simple examples of a few menus with icons. Easy to implement and customize. Basic example....
Read more >Icons in JavaScript DropDownButton control - Syncfusion
DropdownButton can have an icon to provide the visual representation of the action. To place the icon on a DropdownButton, set the iconCss...
Read more >How to replace dropdown-toggle icon with another default ...
Bootstrap provides the option of adding a dropdown to our websites. The default icon on the dropdown button is the 'downward solid arrow' ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@picodoth As you can see in the example, having no margin doesn’t looks nice. Having a default margin will prevent this situation in the future, making the design framework more consistent. In the case someone wants a different margin, they can do what you say: override the defaults.
Also, like I mentioned, that is something is being done in several other components that use icons:
.ant-tabs-tab .anticon.ant-menu-item .anticon.ant-menu-submenu-title .anticonThanks @picodoth and @afc163! 👍