@mixin icon($background-position: 0 50%, $display: inline-block)
{
    background-repeat: no-repeat;
    background-position: $background-position;
    display: $display;
    vertical-align: middle;
}

@mixin icon-inline(
    $side: left,
    $width: 24px,
    $height: auto,
    $background-position: 2px 50%,
    $display: inline-block
) {
    @if $height == auto
    {
        $height: $width;
    }

    @include icon($background-position, $display);
    padding-#{$side}: $width;
    line-height: $height;
}

@mixin icon-left($width: 24px, $height: auto, $background-position: 2px 50%, $display: inline-block)
{
    @include icon-inline(left, $width, $height, $background-position, $display);
}

@mixin icon-right($width: 24px, $height: auto, $background-position: 100% 50%, $display: inline-block)
{
    @include icon-inline(right, $width, $height, $background-position, $display);
}