Sass map not passing string through variable - css

Question

I am trying to create a sass map to apply an icon class to a nested element.
My elements are a div (which will have the class applied) and a span inside that "holds" the icon:
<div class="pboi-tour_adventure">
<span></span>
</div>
In actuality, it's part of an AngularJS ng-for, if that matters:
<div class="icon-sample" ng-repeat="icon in maps.icons">
<div class="{{icon}}">
<span></span>
</div>
</div>
So, following the guidance in this article, I am using a sass map and an each loop:
$poi-icons: (
tour_adventure: "\e96c",
tour_beach: "\e96d",
tour_tourist_attractions: "\e96e",
tour_tourist_infomation: "\e96f"
);
#each $name, $icon in $poi-icons {
.pboi-#{$name} {
span::before {
content: $icon;
}
}
}
My issue is that when I inspect the html, there is clearly no "before" pseudo element in the inspector, and the compiled css is
.pboi-tour_adventure span::before { content: ""; }
When I expect it to be:
.pboi-tour_adventure span::before { content: "\e96c"; }
Of course, the icon is not working because of this.
NOTE: Even if I flatten it out to match the example in the article:
#each $name, $icon in $poi-icons {
.pboi-#{$name}::before {
content: $icon;
}
}
The same thing happens.
Simplified case:
I put this into Sassmeister:
$foo: 'bar';
$icons: (
busi_ATM: 'foo',
busi_bank: $foo,
busi_business: '\e902'
);
#each $name, $icon in $icons {
.pboi-#{$name}:before {
content: $icon;
}
}
and I get
.pboi-busi_ATM:before {
content: "foo";
}
.pboi-busi_bank:before {
content: "bar";
}
.pboi-busi_business:before {
content: "";
}
Why does Sass pass through the first 2 strings but not '\e902'?
Also, and more confusing, is when I use the loop the :before shows up in the compiled CSS file, but not in the Web Inspector in the browser. This I don't get at all.

Answer 1

Sass converts the characters internally to the exact ligature/symbol/icon. That's the reason you are seeing a ""; in the inspector. It doesn't mean Sass is not able to parse the character. It means that those characters are not readable in the developer tools.
If for some reason you are seeing the same box in the output, then you are not setting the font properly, or your font is still trying to load. You can check the computed glyph in dev tools to verify what font is loaded.
If you still want to see the actual Unicode, then you can do a simple test and verify it. you can pass only 'e902' and append the '\' in front of it. I have attached the snippet for it
#charset 'UTF-8';
$poi-icons: (
tour_adventure: "e96c",
tour_beach: "e96d",
tour_tourist_attractions: "e96e",
tour_tourist_infomation: "e96f"
);
#each $name, $icon in $poi-icons {
.pboi-#{$name} {
span::before {
content: unquote("\"")+unquote(str-insert($icon,"\\", 1))+unquote("\"");
}
}
}
reference sass issue:
https://github.com/sass/sass/issues/1395