Icon font doesn't show.
Eduardo Gomez
3,591
Reputation points
In mobile, I don't see my label with my icons, that is a material icon font.
In windows I can see everything
- What I am trying to achieve, is to use Icon Font in my app
- The expected behavior is to be able to see my icons on mobile.
this is Windows
This is Android
What I did to use Icon font
- I downloaded the Google Material icons from here (https://github.com/google/material-design-icons)
- Put the desired font in Resources/Fonts
- Register the font in MaiuProgram
builder
.UseMauiApp<App>()
.UseSkiaSharp()
.UseMauiCommunityToolkit()
.ConfigureSyncfusionCore()
.ConfigureFonts(fonts => {
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
fonts.AddFont("MaterialIconsRound-Regular.otf", "Mat");
})
.ConfigureEssentials(essentials => {
essentials.UseMapServiceToken(Constants.MAPKEY);
});
var firebaseAuthClient = new FirebaseAuthClient(firebaseAuthConfig);
- create a static public class, using https://andreinitescu.github.io/IconFont2Code/ (So I can have intelicense)
- consume it like this LoginPage
xmlns:helpers="clr-namespace:DemyAI.Helpers"
xmlns:inputLayout="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
xmlns:vm="clr-namespace:DemyAI.ViewModels"
x:DataType="vm:LoginPageViewModel">
<Grid
Margin="20"
RowDefinitions="100,80,80,50,20"
RowSpacing="40"
WidthRequest="{OnIdiom Desktop=500,
Phone=300}">
<ActivityIndicator
Grid.RowSpan="5"
HeightRequest="100"
HorizontalOptions="Center"
IsRunning="{Binding IsBusy}"
VerticalOptions="Center"
WidthRequest="100"
Color="#422777" />
<Label
FontFamily="Mat"
FontSize="94"
HorizontalTextAlignment="Center"
IsVisible="{Binding isNotBusy}"
Text="{Static helpers:IconFont.Cloud_queue}"
VerticalTextAlignment="Center" />
Sign in to answer