@font-face {
  font-family: "materialicons";
  src: url(../icons/materialicons-regular.woff) format("woff");
}

.Icon,
*[data-icon]:before {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;

  font-family: "materialicons";
  font-size: 24px;
  text-align: center;

  color: black;

  content: attr(data-icon);

  /* This is important for IE, which has it off by default */
  font-feature-settings: "liga" 1;
}

.Icon.-small {
  font-size: 18px;
}

.icon-toggled:before {
  color: #777777;
}

.icon-paused:before {
  color: gold;
}