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
ttffont with new icons.
- 2️⃣ Re-deployed app cache font and now it’s invalid
- 3️⃣ Switched between branches with different versions of
- 4️⃣ *Added
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
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
<!-- Remove these lines of code -->
<!-- <ItemGroup> -->
<!-- <None Remove="Resources\Fonts\IcoMoon.ttf" /> -->
<!-- </ItemGroup> --><!-- Left only these lines of code -->
<EmbeddedResource Include="Resources\Fonts\IcoMoon.ttf" />
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 🤩
Bonus Part from OTempura — Scripts to Cleanup
In this bonus part, I will show you scripts to automatically remove
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 😝
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 😉