.material-symbols-outlined {
    font-variation-settings: var(--font-variation-settings);
}

.icon,
[data-icon] {
    gap: var(--unit-2);
}
.icon:before,
[data-icon]:before {
    content: attr(data-icon);
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--unit-6);
    height: var(--unit-6);
    overflow: hidden;
    color: var(--gray-5);
    font-family: var(--font-family-icons);
    font-size: var(--font-size-button-md);
    font-weight: var(--font-weight-regular);
}

i.icon,
i[data-icon] {
    display: inline-flex;
    gap: var(--unit-0);
    font-style: normal;
    width: var(--unit-6);
    height: var(--unit-6);
    position: relative;
    top: var(--unit-2);
}
i.icon.small,
i[data-icon].small {
    top: calc(var(--unit-2) + (var(--unit-1) / 3));
    font-variation-settings: 'FILL' 1;
    width: var(--unit-5);
    margin-top: calc(var(--unit-1)* -1);
}
i.icon:before,
i[data-icon]:before {
    content: attr(data-icon);
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--unit-6);
    height: var(--unit-6);
    overflow: hidden;
    color: var(--icon-default);
    font-style: normal;
    font-family: var(--font-family-icons);
    font-size: var(--font-size-button-md);
    font-weight: var(--font-weight-regular);
    position: absolute;
}
i.icon.small:before,
i[data-icon].small:before {
    font-size: var(--font-size-button-sm);
    width: var(--unit-5);
    height: var(--unit-6);
}