React Semantic UI - position icon to the left of text in Menu Item
Looks like I managed to answer my own question. It's not great, but it looks like a little css does the trick.
Just float the icon left
i {
float: left;
margin-right: 12px !important;
}
the menu item itself just becomes an a
element
a {
text-align: center;
line-height: 40px;
}
EDIT:
This is what I actually ended up using, if anyone wants to know. The CSS rules make it a little complicated to get your own rules in based on precedence.
/****** Sidebar ******/
.ui.icon.menu .item {
line-height: 40px;
padding-right: 500px;
text-align: justify;
font-weight: 600;
}
.ui.vertical.menu .item::before {
height: 0px;
}
.ui.labeled.icon.menu .item > .icon:not(.dropdown) {
float: left;
margin-right: 12px !important;
}