i.material-icons {
  vertical-align: middle;
  line-height: inherit;
}

.flipped.material-icons {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.small.material-icons {
  font-size: 18px;
}

.large.material-icons {
  font-size: 36px;
  line-height: 1;
}

.circled.material-icons {
  width: 1.77778em;
  height: 1.77778em;
  line-height: 1.77778;
  background-color: #e0e0e0;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 10px;
}

.ui.menu .item .circled.material-icons {
  position: relative;
  top: 4px;
  margin-top: -15px;
}

.red.circled.material-icons{ background-color: #DF1A16; color: white; }
.orange.circled.material-icons{ background-color: #E36C00; color: white; }
.yellow.circled.material-icons{ background-color: #fff26c; color: white; }
.olive.circled.material-icons{ background-color: #96fa76; color: white; }
.green.circled.material-icons{ background-color: #1BB94F; color: white; }
.teal.circled.material-icons{ background-color: #21aa9c; color: white; }
.blue.circled.material-icons{ background-color: #0B2E9B; color: white; }
.violet.circled.material-icons{ background-color: #343967; color: white; }
.purple.circled.material-icons{ background-color: #7a1f88; color: white; }
.pink.circled.material-icons{ background-color: #d21066; color: white; }
.brown.circled.material-icons{ background-color: #b46a22; color: white; }
.grey.circled.material-icons{ background-color: #a4aab5; color: white; }
.black.circled.material-icons{ background-color: #061d60; color: white; }