Своя иконка избранного в карточках товаров

<!--https://dsgnmax.ru/icon-favourite-->
<style>
/*Своя иконка избранного в карточках товаров*/
:root{
    --iconNormal: url(https://static.tildacdn.com/tild6331-3866-4262-b166-376366343630/normal.svg);
    --iconAdded: url(https://static.tildacdn.com/tild3935-3465-4131-b638-656630306137/added.svg);
    --iconScaleHover: scale(1.1);  /*Увеличение иконки при наведении*/
    --iconTransition: all .4s ease-in-out;  /*Плавность анимации*/
    --bgIconRadiusNormal: 10px; /*Радиус скругления углов у подложки с иконкой*/
    --bgIconRadiusHover: 20px; /*Радиус скругления углов у подложки с иконкой при наведении*/
    --bgIconColorNomral: rgba(255, 255, 255, 0.2);  /*Цвет подложки с иконкой для эффекта стекла*/
    --bgIconColorHover: #fff;    /*Цвет подложки с иконкой при наведении*/
    --widthIcon: 32px;  /*Ширина иконки*/
    --heightIcon: 32px; /*Высота иконки*/
    
}
/*Иконка в обычном состоянии*/
    a.t1002__addBtn:after {
    content: "";
    position: absolute;
    width: var(--widthIcon);
    height: var(--heightIcon);
    background-image: var(--iconNormal);
    background-repeat: no-repeat;
    transition: var(--iconTransition);
}   

/*Иконка при наведении*/
    a.t1002__addBtn:hover:after {
    content: "";
    transform: var(--iconScaleHover);
    transition: var(--iconTransition);
}   

/*Иконка, когда товар добавили в избранное*/
    a.t1002__addBtn_active:after {
    content: "";
    width: var(--widthIcon);
    height: var(--heightIcon);
    background-image: var(--iconAdded);
    background-repeat: no-repeat;
}

/*Скрываем оригинальную иконку*/
.t1002__addBtn svg{
    display:none;
}

/*Если нужен определенный радиус скругления и цвет у подложки с иконкой*/

.t1002__addBtn{
    border-radius: var(--bgIconRadiusNormal) !important; /*Радиус скругления*/
    background: var(--bgIconColorNomral) !important;    /*Цвет подложки*/
    transition: var(--iconTransition);
    backdrop-filter: blur(10px);    /*Размытие элементов под подложкой с иконкой*/
}
.t1002__addBtn:hover{
    border-radius: var(--bgIconRadiusHover) !important; /*Радиус скругления при наведении*/
    background: var(--bgIconColorHover) !important;    /*Цвет подложки при наведении*/
    transition: var(--iconTransition);
}
.t1002__addBtn_active{
    background: var(--bgIconColorHover) !important;
}
</style>