.materialIcon {
    display: inline-block;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.materialIcon .icon {
    display: inline-block;
    background: url(../images/materialIconSprite.png) 0 0 no-repeat;
    width: 24px;
    height: 24px;
    margin: 12px;
}

.materialIcon.focused, .materialIcon.pressed {
    background: #d1d1d1;
    border-radius: 50%;
}

.materialIcon .icon.pause {
    background-position: 0 0;
}

.materialIcon .icon.pause.hover {
    background-position: -24px 0;
}

.materialIcon .icon.pause.focused {
    background-position: -48px 0;
}

.materialIcon .icon.pause.pressed {
    background-position: -72px 0;
}

.materialIcon .icon.pause.inactive {
    background-position: -96px 0;
}

.materialIcon .icon.play {
    background-position: 0 -24px;
}

.materialIcon .icon.play.hover {
    background-position: -24px -24px;
}

.materialIcon .icon.play.focused {
    background-position: -48px -24px;
}

.materialIcon .icon.play.pressed {
    background-position: -72px -24px;
}

.materialIcon .icon.play.inactive {
    background-position: -96px -24px;
}

.materialIcon .icon.cancel {
    background-position: 0 -48px;
}

.materialIcon .icon.cancel.hover {
    background-position: -24px -48px;
}

.materialIcon .icon.cancel.focused {
    background-position: -48px -48px;
}

.materialIcon .icon.cancel.pressed {
    background-position: -72px -48px;
}

.materialIcon .icon.cancel.inactive {
    background-position: -96px -48px;
}

.materialIcon .icon.arrow-l {
    background-position: 0 -72px;
}

.materialIcon .icon.arrow-l.hover {
    background-position: -24px -72px;
}

.materialIcon .icon.arrow-l.focused {
    background-position: -48px -72px;
}

.materialIcon .icon.arrow-l.pressed {
    background-position: -72px -72px;
}

.materialIcon .icon.arrow-l.inactive {
    background-position: -96px -72px;
}

.materialIcon .icon.arrow-d {
    background-position: 0 -96px;
}

.materialIcon .icon.arrow-d.hover {
    background-position: -24px -96px;
}

.materialIcon .icon.arrow-d.focused {
    background-position: -48px -96px;
}

.materialIcon .icon.arrow-d.pressed {
    background-position: -72px -96px;
}

.materialIcon .icon.arrow-d.inactive {
    background-position: -96px -96px;
}