# I don't see why icon instead of strings?

**URL:** <https://forums.fusetools.com/t/i-dont-see-why-icon-instead-of-strings/4194>\
**Category:** How-to Discussions\
**Created:** [July 12, 2016, 6:37am UTC](https://forums.fusetools.com/t/i-dont-see-why-icon-instead-of-strings/4194 "2016-07-12T06:37:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Onur\_Baran](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/onur_baran/32/127_2.png) [@Onur\_Baran](https://forums.fusetools.com/u/Onur_Baran)\
**Post date:** [July 12, 2016, 6:37am UTC](https://forums.fusetools.com/t/i-dont-see-why-icon-instead-of-strings/4194/1 "2016-07-12T06:37:03Z")

</div>

I was inspired by the code here [Forum page](https://www.fusetools.com/community/forums/howto_discussions/weird_path_error_when_databinding_to_filesource_ty?page=1).

I don’t see why icon instead of strings?

```auto
<App>
    <Font ux:Global="Linearicons" File="Linearicons-Free.ttf" />

    <!-- Menu Icons -->
    <Text ux:Class="Logout" Value="&#xf08b;" Font="Linearicons" Margin="5,0,5,0" FontSize="39" Alignment="Center"/>
    <Text ux:Class="Basket" Value="&#xe82e;" Font="Linearicons" Margin="5,0,5,0" FontSize="39" Alignment="Center"/>
    <Text ux:Class="Sent" Value="&#xe844;" Font="Linearicons" Margin="5,0,5,0" FontSize="39" Alignment="Center"/>
    <Text ux:Class="User" Value="&#xe82a;" Font="Linearicons" Margin="5,0,5,0" FontSize="39" Alignment="Center"/>

    <Panel>
      <JavaScript>
        var Observable = require('FuseJS/Observable');

        var menuItems = [{
          "title": "Menu Item 01",
          "icon": "&#xe82e;" // Basket
        }, {
          "title": "Menu Item 02",
          "icon": "&#xe82a;" // User
        }, {
          "title": "Menu Item 03",
          "icon": "&#xe844;" // Sent
        }, {
          "title": "Menu Item 04",
          "icon": "&#xf08b;" // Logout
        }];

        function clone(obj) {
          return JSON.parse(JSON.stringify(obj));
        }

        function getMenuItems() {
          return clone(menuItems);
        }

        exports.menuItems = getMenuItems(); 
      </JavaScript>

      <Grid ux:Class="MenuGrid" Background="White" Columns="3,7" ColumnCount="3" Padding="20,30">
        <string ux:Property="MenuIcon" />
        <string ux:Property="MenuText" />

        <Text Font="Linearicons" FontSize="16" Value="{Property this.MenuIcon}" Alignment="CenterLeft" />
        <Text FontSize="16" Margin="15,0,0,0" Alignment="CenterLeft" TextAlignment="Right" TextWrapping="Wrap" Value="{Property this.MenuText}" />
      </Grid>

      <StackPanel>
        <Each Items="{menuItems}">
          <MenuGrid Margin="0,10,0,0" MenuText="{title}" MenuIcon="{icon}" />
        </Each>
      </StackPanel>

    </Panel>
</App>

```

`Preview Screen`

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/VeUfH7shqTqP-legacy-files-9kp2XqC2uhpfHrgK-m8j7M6l87YuiUiYpjbc5oLmN.png)

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [July 12, 2016, 7:15am UTC](https://forums.fusetools.com/t/i-dont-see-why-icon-instead-of-strings/4194/2 "2016-07-12T07:15:34Z")

</div>

Hi!

You need to use the JavaScript unicode escape codes when using the characters in JavaScript:

So instead of

```auto
 var menuItems = [{
          "title": "Menu Item 01",
          "icon": "&#xe82e;" // Basket
        }, {
          "title": "Menu Item 02",
          "icon": "&#xe82a;" // User
        }, {
          "title": "Menu Item 03",
          "icon": "&#xe844;" // Sent
        }, {
          "title": "Menu Item 04",
          "icon": "&#xe86f;" // Logout
        }];

```

try

```auto
        var menuItems = [{
          "title": "Menu Item 01",
          "icon": "\ue82e" // Basket
        }, {
          "title": "Menu Item 02",
          "icon": "\ue82a" // User
        }, {
          "title": "Menu Item 03",
          "icon": "\ue844" // Sent
        }, {
          "title": "Menu Item 04",
          "icon": "\ue86f" // Logout
        }];

```

---

<div class="post-metadata">

**Author:** ![Onur\_Baran](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/onur_baran/32/127_2.png) [@Onur\_Baran](https://forums.fusetools.com/u/Onur_Baran)\
**Post date:** [July 12, 2016, 7:22am UTC](https://forums.fusetools.com/t/i-dont-see-why-icon-instead-of-strings/4194/3 "2016-07-12T07:22:45Z")

</div>

Thank you. 🙂