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;
}