.icon svg, .icon__svg{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
}

.icon{
    fill: $icon;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: $iconSize;
    min-width: $iconSize;
    padding-bottom: $iconSize;
}

@for $i from 1 through length($iconSizes) {
    $keys: map-keys($iconSizes); $key: nth($keys, $i); $size: map-get($iconSizes, $key);

    .icon--#{$key}{
        width: $size;
        min-width: $size;
        padding-bottom: $size;
        
    }
}

.icon--text{
    width: 1em;
    min-width: 1em;
    padding-bottom: 1em;
}

@for $i from 1 through length($iconPaddings) {
    $keys: map-keys($iconPaddings); $key: nth($keys, $i); $size: map-get($iconPaddings, $key);

    .icon--pad#{$key}{
        svg{
            padding: $size;
        }
    }
}