$counter in @each statement not working

I am not getting this statement to work. Using your example:

`@each $animal $i in (puma, sea-slug, egret, salamander) {
.$(animal)-icon {
background-image: url("images/icon-$(i).svg");
}
}`

The CSS that is returned when I include the counter($i) looks like this:

`.$(animal)-icon {
background-image: url("images/icon-$i.svg");
}`

If I remove the counter, the statement proceeds as expected.