Icon display error

How-to Discussions
1

Hi,

I want a create dynamic stackpanel with icon. Manual when I gave the value of the symbol, it shows up as normal (pay attention to the first line of the image). But I do not see an icon with values from a database (the second row in the picture). How can I fix it?

<StackPanel ux:Class="ItemStackPanel" ItemSpacing="10" ContentAlignment="VerticalCenter">
  <string ux:Property="ItemIcon" />

  <Text Font="Linearicons"  Value="{Property this.ItemIcon}" TextColor="white" FontSize="20" Alignment="HorizontalCenter" />
</StackPanel>

...
...
<StackPanel Margin="10">
  <ColumnLayout ColumnCount="2" ColumnSpacing="10" ItemSpacing="10" />
  <Each Items="{categoriesData.responseData.categories}">
    <Rectangle Height="70" Color="topPanelColor" CornerRadius="5">
      <Text Font="Linearicons" Value="&#xe87f;" TextColor="white" FontSize="20" Alignment="HorizontalCenter" />
      <ItemStackPanel Margin="0,5,0,0" ItemIcon="{icon}" />
    </Rectangle>
</Each>
</StackPanel>

file
r7n0BENjNhz3-legacy-files-v7UsgqcPJne72AF8-1GbwDLj2Yj2d3Ok3Th7rg1iv.png732×1132

2

Hi,

Dear Kristian said that:

So, these unicode escape codes are specific to the programming language you are using. So the “&#xxxx” ones are for XML and the \uxxxx ones are for JavaScript. You cant just send these strings over HTTP and have them be Unicode characters, then you just get the strings you send. You have to send actual unicode characters from your server, or somehow encode them there and decode them again on the client.

The solution to the problem is the following. Thank you Kristian! :slight_smile:

function toUnicode(theString) {
  var unicodeString = '';

  unicodeString = String.fromCharCode(parseInt(theString,16));
  return unicodeString;}

function convertIcon(responseObject) {
  var catTmp = responseObject;
  var cat0 = catTmp.responseData;

  for (i = 0; i < categoriesCount; i++) {
    cat0.categories[i].icon = toUnicode(cat0.categories[i].icon);
  };

  categoriesData.value = cat0;
}

function fromDB() {
...
...

  convertIcon(responseObject);

...
...
}