custom-bootstrap4/src/scss/argon/custom/_icon.scss

//
@mixin icon-shape-variant($color) {
    color: saturate(darken($color, 10%), 10);
    background-color: transparentize(lighten($color, 10%), .5);
}

@mixin icon-font($content, $font-size) {
    content: $content;
    font-family: $icon-font-family;
    font-size: $font-size;
}
// Icon action
//
$icon-size: 3rem !default;
$icon-size-xl: 5rem !default;
$icon-size-lg: 4rem !default;
$icon-size-sm: 2rem !default;
$icon-size-xs: 1.25rem !default;


.icon-actions {
    > a {
        display: inline-block;
        margin-right: .75rem;
        color: $gray-600;
        font-size: .875rem;

        &:last-of-type {
            margin-right: 0;
        }

        span {
            margin-left: .1875rem;
            font-weight: $font-weight-bold;
            color: $text-muted;
        }

        &:hover {
            span {
                color: darken($text-muted, 10%);
            }
        }
    }

    > a,
    > a:hover,
    > a.active {
        color: $gray-800;
    }

    > .favorite:hover,
    > .favorite.active {
        color: $favorite-color;
    }

    > .love:hover,
    > .love.active {
        color: $love-color;
    }

    > .like:hover,
    > .like.active {
        color: $like-color;
    }
}

.icon-actions-lg {
    a {
        font-size: 1.25rem;
        margin-right: .875rem;
    }
}

//
// Icon shape
//


.icon-shape {
	padding: 12px;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;


	i, svg {
		font-size: 1.25rem;
	}

	&.icon-lg {
		i, svg {
			font-size: 1.625rem;
		}
	}

	&.icon-sm {
		i, svg {
			font-size: .875rem;
		}
	}

	&.icon-xs {
		i, svg {
			font-size: .6rem;
		}
	}

	svg {
		width: 30px;
		height: 30px;
	}

}

@each $color, $value in $theme-colors {
	.icon-shape-#{$color} {
		@include icon-shape-variant(theme-color($color));
	}
}


// Icon
//

.icon {
	width: $icon-size;
	height: $icon-size;

	i, svg {
		font-size: $icon-size - .75;
	}

    + .icon-text {
    	padding-left: 1rem;
    	width: calc(100% - #{$icon-size} - 1);
    }
}


// Extra large icons

.icon-xl {
	width: $icon-size-xl;
	height: $icon-size-xl;

	i, svg {
		font-size: $icon-size-xl - .75;
	}

    + .icon-text {
    	width: calc(100% - #{$icon-size-xl} - 1);
    }
}


// Large icons

.icon-lg {
	width: $icon-size-lg;
	height: $icon-size-lg;

	i, svg {
		font-size: $icon-size-lg - .75;
	}

    + .icon-text {
    	width: calc(100% - #{$icon-size-lg} - 1);
    }
}


// Small icon

.icon-sm {
	width: $icon-size-sm;
	height: $icon-size-sm;

	i, svg {
		font-size: $icon-size-sm - .75;
	}

    + .icon-text {
    	width: calc(100% - #{$icon-size-sm} - 1);
    }
}

// Extra Small icon

.icon-xs {
	width: $icon-size-xs;
	height: $icon-size-xs;

	i, svg {
		font-size: $icon-size-xs - .75;
	}

    + .icon-text {
    	width: calc(100% - #{$icon-size-xs} - 1);
    }
}