Forum Xamarin.Forms

Display Xamarin Font Icons From Stored Data

AaronBlaylockAaronBlaylock USMember ✭✭

Hello! What is the best way to display font icons with data being pulled from a web service? I want to store the value of the icon and display the icon similar to the rest of the information, but with a custom font icon.

I have a xamarin forms app working with data from a webservice successfully. Here is my model.

public class TypeModel
{
    [PrimaryKey]
    public int pType { get; set; }

    public int fDepartment { get; set; }

    public string Title { get; set; }

    public string Description { get; set; }

    public string Icon { get; set; }

    public string Version { get; set; }

}

I also got the font icons working successfully like the tutorial at [1]: https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/ I got my icons stored under this class. Trying to transition to managing these values with web service or array if I have too now.

public const string IconCheckMark = "\uf12c";

public const string IconSearchGlass = "\uf349";

public const string IconQuestionMark = "\uf2d6";

public const string IconQuestionCircle = "\uf2d7";

But here is where my problem starts. My ViewModel is doing the work to create the collection. How do I assign a value that will display and match correctly.

public ObservableCollection<TypeModel> TypesCollection { get; set; }

TypesCollection.Clear();

IEnumerable<TypeModel> types = await DataSource.GetTypes();

foreach (var key in types)
{
    \\Original value doesn't display correctly, shows like \U f 1 2 c when debugging on emulator
    \\key.Icon = key.Icon;

    \\Works and displays correctly but static data displays one icons for all
    \\key.Icon = "\uf12c";

    \\Works and displays correctly but static data displays one icons for all
    \\key.Icon = FontClass.IconCheckMark;

    TypesCollection.Add(key);    
}

Nice and simple after that for the xaml files.

<ResourceDictionary>

    <OnPlatform x:Key="IconFonts" x:TypeArguments="x:String">

        <On Platform="iOS" Value="Material Design Icons"></On>

        <On Platform="Android" Value="IconFonts.ttf#Material Design Icons"></On>

        <On Platform="UWP" Value="/Assets/IconFonts.ttf#Material Design Icons"></On>

    </OnPlatform>

</ResourceDictionary>

<Label FontFamily="{StaticResource IconFonts}" Text="{Binding Icon}"></Label>

Best Answer

  • AaronBlaylockAaronBlaylock US ✭✭
    Accepted Answer

    Got the answer from Microsoft Dev Community. First to explain what was happening: When you put the following in C# code:

    Icon = "\uf2d6"

    The “\uf2d6” is not actually a literal string, but rather it ends up being a single character (the one represented by that UTF code) at compile time. In other words the “\u” means that what follows is a hex code for a character and that whole “string” will end up just being that one character. If you inspect the Icon property after the above assignment, you will see that the property only contains a single character, not the “\uf2d6” string.

    So when you get “2d6” from your web service in the Icon property, and then try to add “\uf” before it, you are not creating the escape sequence for the character but rather adding to the string literal. So what you need to do is parse the string for the hex number into an int and then cast it to a char and then assign that character to your Icon property. You can do this as follows (put this in the foreach loop in the sample you sent me):

    string utfCode = $"f{key.Icon}"; // Adds the leading “f” to make it a correct hex number for the desired UTF code.
    int character = int.Parse(utfCode, System.Globalization.NumberStyles.HexNumber); // parses that string literal into an int
    key.Icon = ((char)character).ToString(); // casts that int to a char and then gets the string representation for that character and assigns it back to your Icon property

    TypesCollection.Add(key);

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Thank you for posting in Developer Community. Good question! I will try myself.. And I’ll get back to you as soon as I have an update. Much appreciated for your patience.

  • AaronBlaylockAaronBlaylock USMember ✭✭

    hmm. looking at locals when debugging and it shows "\uf12c" and I have \uf12c stored in database.

  • AaronBlaylockAaronBlaylock USMember ✭✭

    and the only way I have done it successfully is created and fill the model manually example: new TypeModel { pType = 12345 Icon = CheckIcon.IconCheckMark } rather than pulling from a webservice and looping through the data

  • AaronBlaylockAaronBlaylock USMember ✭✭
    edited May 13

    Checked webservice and don't see anything alarming. I even dumbed down the data by only providing the value (example 987 rather than \uf987) and using Insert(0, @\uf) but the debugger keeps coming back with the string \ \uf987. Going to try working with 驪 format.

  • AaronBlaylockAaronBlaylock USMember ✭✭
    Accepted Answer

    Got the answer from Microsoft Dev Community. First to explain what was happening: When you put the following in C# code:

    Icon = "\uf2d6"

    The “\uf2d6” is not actually a literal string, but rather it ends up being a single character (the one represented by that UTF code) at compile time. In other words the “\u” means that what follows is a hex code for a character and that whole “string” will end up just being that one character. If you inspect the Icon property after the above assignment, you will see that the property only contains a single character, not the “\uf2d6” string.

    So when you get “2d6” from your web service in the Icon property, and then try to add “\uf” before it, you are not creating the escape sequence for the character but rather adding to the string literal. So what you need to do is parse the string for the hex number into an int and then cast it to a char and then assign that character to your Icon property. You can do this as follows (put this in the foreach loop in the sample you sent me):

    string utfCode = $"f{key.Icon}"; // Adds the leading “f” to make it a correct hex number for the desired UTF code.
    int character = int.Parse(utfCode, System.Globalization.NumberStyles.HexNumber); // parses that string literal into an int
    key.Icon = ((char)character).ToString(); // casts that int to a char and then gets the string representation for that character and assigns it back to your Icon property

    TypesCollection.Add(key);

Sign In or Register to comment.