Three ways to Fix broken Icon Font in Xamarin App

What to do when suddenly your Icon Font is displayed incorrectly? Here we will get ways to fix that with couple simple steps.

Time to time, when you run your app in Android, iOS or even in UWP in one of the platform or all at the same time you can get unexpected undefined icons or binding Path visible instead of the icon itself. When it can happen? — Here is all pretty simple 🤓. If it works before and now stops, the most popular reasons for that are:

• 1️⃣ Updated ttf font with new icons.
• 2️⃣ Re-deployed app cache font and now it’s invalid
• 3️⃣ Switched between branches with different versions ofttf
• 4️⃣ *Added ttf with Rider IDE

The First Way to Fix

I assume that you are smart guys and already make clean-rebuild in your IDE, but it does not help. Ok, this step may fix like 85%. We need just delete it manually, from iPhone Simulator or Android Emulator or Windows Menu(for UWP). I know, I know, this is a pretty simple step and stupid, but this is not so not obvious at the beginning and what is most important — quite useful. After this step just deploys the app once again.

I’m working from MacOS, so input the first picture from Google were shown how to remove the UWP app 🤪

The Second Way to Fix

If First way doesn’t help, don’t worry, now you should open in Finder(macOS) or Explorer(Windows) root folder of your project and find all bin and obj folders. And just remove them all. And if you try to start a solution right now — you probably will get an error. And this is ok, seriously! Now you need just Restore NuGet Packages on the solution level and rebuild your solution and deploy.

This should fix 99% of bugs.

If nothing helps — The Third Way to Fix

Ok, what we have here — nothing helps yes? This quite unusual behaviour. Visual Studio or Visual Studio for Mac mostly can blend your csproj file with icon font ttf and compile it correctly, but Rider has problems with it, so hard that it can work than in next build fails and after that works again.

If you open your csproj file for edition and search for your ttf font you may find that Rider IDE firstly ignore it to compile and after that adds once again like EmbeddedResource . And this is a root of our problem, as I wrote above most IDE still blend and compile this correctly, but not Rider. Just remove the part with None Remove="pathToFont\FontName.ttf" line from your csproj file:

<!-- Remove these lines of code -->
<!--  <ItemGroup> -->
<!--    <None Remove="Resources\Fonts\IcoMoon.ttf" /> -->
<!--  </ItemGroup> -->
<!-- Left only these lines of code -->
  <ItemGroup>
    <EmbeddedResource Include="Resources\Fonts\IcoMoon.ttf" />
  </ItemGroup>

Now I listed all that can fail and fix problems with icon fonts in Xamarin Apps for me. If you know what else can help or what else can fail and why, please be free to let me know at Twitter @bbenetskyy, I will be very glad to know them all 🤩

Bohdan Benetskyi is creating advanced CSS gradients for Xamarin, speak at conferences

Bonus Part from OTempura — Scripts to Cleanup

In this bonus part, I will show you scripts to automatically remove bin and obj folders for your solution, special thanks to OTempura for help and for an idea 😎

This is awesome, but for Windows mostly, right now in my Mac, I don’t have Power Shell installed and don’t want to, so, the same solution for Mac users 😝

Note nuget restore will work only if you run that script from a folder with YoutSolutionFile.sln file, otherwise you need to provide path to that file 😉