I am currently working on creating a vertical menu bar using Semantic UI React. The Menu consists of several Menu.Item components, with the first one containing an Icon component without any text in the Menu. However, I'm facing an issue where the Icon is overflowing into the Menu.Item below it. I've tried adjusting margins, padding, and line-height but haven't been able to resolve the problem. Any suggestions or ideas would be highly appreciated. Thank you.
https://i.stack.imgur.com/3eEey.png
Below is the code snippet for the initial Menu.Items. Adding text within the Menu.Item increases the size as expected, but I specifically do not want any Menu text associated with the Icon.
<Menu.Item link><Icon name='x' size='large'/></Menu.Item>
<Menu.Item as={Link} to='/' onClick={this.handleSidebarHide}>
Home
</Menu.Item>
<Menu.Item as={Link} to='/about' onClick={this.handleSidebarHide}>About Us</Menu.Item>