.q-icon
  line-height 1
  width 1em
  height 1em
  letter-spacing normal
  text-transform none
  white-space nowrap
  word-wrap normal
  direction ltr
  text-align center
  position relative

  font-display block // flash of invisible text until the font loads
                     // https://font-display.glitch.me/

  &:before
    width 100%
    height 100%
    display flex !important
    align-items center
    justify-content center

.q-icon,
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp
  user-select none
  cursor inherit
  font-size inherit
  display inline-flex
  align-items center
  justify-content center
  vertical-align middle