$counter in @each statement not working

[kayetter]

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.

[ghost]

In my case $counter starts from 0, not from 1:

@each $icon $i in (network, orders, store, support) {
  .icon-$(i) {
    test-icon: $icon;
  }
}

returns:

.icon-0 {
    test-icon: network;
  }

.icon-1 {
    test-icon: orders;
  }

.icon-2 {
    test-icon: store;
  }

.icon-3 {
    test-icon: support;
  }