Nativescript: What is the proper way to use icon font codes in a binded element?

Created on 2 Dec 2015 · 13Comments · Source: NativeScript/NativeScript

I need to use html codes such as  to display a weather icon in my SchoolBellWeather app, so I can get rid of the scaled images. If I hard-code the code into a Label's text property, the icon displays fine. If I create a switch in a helper file and load up the code depending on the weather forecast given to me by forecast.io, I only see the actual code displayed, not the icon. Should I escape some characters?

Here's the switch in my helper file:

switch(value) {
      case "partly-cloudy-day":
        return "&#xe621;";
        break;

In my xml:

<Label row="3" colSpan="2" text="{{ nowIcon, nowIcon | toIcon() }}" class="weather-icon"/>

and in the code-behind file:

var toIcon = {
        toView: function (value) {
            return helpers.toIcon(value);
        }
    }
appModule.resources["toIcon"] = toIcon;

thanks!

Source

jlooper

Most helpful comment

Yeah, since I wrote the patch that fixed the entity parsing stuff in xml, I am very familiar with this topic. :grinning:

The &codes; does not work in source code because it isn't ran through any type of entity converter, its just a string of meaningless characters to be displayed. No conversion done means that ģ displays as a litteral string value of ģ

When the XML is parsed, all the & entities are parsed into the resulting characters while the XML is being parsed into components. This way none of the components actually needs to be aware of xml entities. (i.e. the &# codes; &word; etc) So that is why you get two different results (and this is the expected behavior).

Now how to do the same thing via source code is actually pretty simple:

switch(value) {
      case "partly-cloudy-day":
        return String.fromCharCode(parseInt('e621', 16));
        break;

What you need to do is Parse the hex number (i.e. everything after the &#x) yourself into a straight integer, so that is why we use parseInt(value, 16); Then we actually create the character using fromCharCode(). If you know the decimal value already; you can just do:
return String.fromCharCode(58913); directly without having to do the parseInt command. Its up to you really how you want it displayed in your source code.

NathanaelA on 2 Dec 2015

👍12

All 13 comments

Yeah, since I wrote the patch that fixed the entity parsing stuff in xml, I am very familiar with this topic. :grinning:

Now how to do the same thing via source code is actually pretty simple:

switch(value) {
      case "partly-cloudy-day":
        return String.fromCharCode(parseInt('e621', 16));
        break;

NathanaelA on 2 Dec 2015

👍12

@NathanaelA you get a gold star!!! Thank you, worked great!
images duckduckgo

jlooper on 2 Dec 2015

You may also get something like \ue621 to work in plain JavaScript string literal.

In identifiers, string literals, and regular expression literals, any code unit can also be expressed via a Unicode escape sequence \uHHHH, where HHHH are four hexadecimal digits.

PanayotCankov on 3 Dec 2015

👍2

@PanayotCankov interesting, I could have sworn I tested that months ago and it didn't work. That is awesome if it is working on both platforms and maybe my test was flawed...

NathanaelA on 3 Dec 2015

@PanayotCankov @NathanaelA what about TabView? Can we use these icon codes within a TabViewItem in the xml?

jlooper on 3 Dec 2015

You can include it in the XML; but depending on the component they may not be configured to use the correct font yet.

I've seen this with a couple components where even though you say you want to use a different font, the sub-control keeps the default font.

Try it, if it works awesome; if not; then the issue isn't the xml; it is that the sub-component that is displaying that character is NOT using the font you want it to; and you might have to do a .android or ,ios and dig into the sub-component and manually assign the font to it. (I would also make a note in a bug report so that in the future when a font is changed on TabView it effects the sub-component it actually needs to.)

NathanaelA on 3 Dec 2015

👍2

Just a note that I confirmed this works on iOS and Android. I had to roll back my use of toIcon functions in the XML and simply pass through my icon code to a switch, which changes the code to a readable string: https://github.com/jlooper/SBW-NativeScript/blob/51675be1d9b8a2be3a06048397496c6f25170cbf/app/main-view-model.js#L201-L237

jlooper on 6 Dec 2015

Working on the help article...

hamorphis on 25 Feb 2016

https://github.com/NativeScript/docs/pull/249

hamorphis on 26 Feb 2016

@NathanaelA you have my respect too, thanks man

davidjonz2005 on 9 Aug 2017

@PanayotCankov thanks your suggestion worked for me!

anuragd7 on 23 Aug 2017

i´ve got this problem for at least a month. I´ve been using String.fromcharcode() to update dinamically the content of an label with an icon in it, Hten found this answer https://stackoverflow.com/questions/13093126/insert-unicode-character-into-javascript , and you just can try "Label.text='\u03A9' ", where "03A9 is the unicode value of the font. and it works like a charm!, i feel so stupid ;_;