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:

  • 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.

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.

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.

<!-- 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>

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 😎

Microsoft MVP | C# .Net | Xamarin