How to set the height equal to width dynamically using css?

Question

For example, for a div with classname icon, after setting the width as 15%, how to set the height appropriately to make this div container as a square?

.icon {
    width: 15%; 
}

I've tried the aspect-ratio while seems it not work, is there any easy and straightforward way to do it?