Parsa Karami`s Blog

an Enthusiastic Windows Delevoper

Icons and Special Characters in UWP

831 days ago on July 07, 2017   |   Parsa Karami on Universal Windows App   |   3209
     Icons and Special Characters in UWP     

Icons is the some part of app that makes it more beautiful and increse ease of access to app functionality in all the application type assumed you use plus symbol instead of add new person in addition to you have been able to develop a beautiful app, it helps user use functionality in more simple way.

Icons is the some part of app that makes it more beautiful and increse ease of access to app functionality in all the application type assumed you use plus symbol instead of add new person in addition to you have been able to develop a beautiful app, it helps user use functionality in more simple way.
 

Segue MDL2 is the default font that represent icons UWP app, you can see full list of icons here also you can see some of icons in the following list :

Character Map application is a usefull app for find icons and special characters. use this link for download it from Windows Store, in order to install it you need Windows 10 Creator Updates (Build 15063). if use older build number of windows you can use other same app on Windows Store.

if you run Character Map app see all the installed font on your machine in the left side and in the right side of app copy the code of symbols and use it in your app. see the view off Character Map application below :

in order to use icons in your app you can use three elements on xaml, the first one is FontIcon and the second one is SymbolIcon and the last one is TextBlock, so let me show how can use it in xaml and code behind, it`s so usefull see Keeratsingh Blog and read the article Font icons in UWP. for show icons, emoji and special character in app you can use two windows font, also you can any extenral fonts on UWP application but all universal apps support this fonts. the first font is Segoe MDL2 Assets and the second one is Segoe UI Symbols, I said before you can use three elements for showing icons and special character in UWP, the first one is FontIcon, according to accordings to Windows Dev Center the FontIcon element Represents an icon that uses a glyph from the specified font for completing i want to say FontIcon is a generalized version of SymbolIcon that support any font for showing all unicode character but the SymbolIcon only use Segoe MDL2 Assets. both of element inherit from IconFont Class but FontIcon use Glyph property that get unicode value of symbol and SymbolIcon use Symbol property that fill with enum type of windows symbol.


     <FontIcon Glyph="&#xE170; &#xE170;" FontFamily="Segoe MDL2 Assets" />
     <FontIcon Glyph="&#xE170; &#xE170;" FontFamily="Segoe UI Symbol" />

for using SymbolIcon must write as below


     <SymbolIcon Symbol="Refresh"></SymbolIcon>
     <SymbolIcon Symbol="Download"></SymbolIcon>
     <SymbolIcon Symbol="Mail"></SymbolIcon>

on ther other side if you have some styles on your textblock you can still use same as previous and in the Text property of Textblock add Icons with unicode value.


     <TextBlock Text="&#xE170; &#xE170;" FontFamily="Segoe MDL2 Assets" />
     <TextBlock Text="&#xE170; &#xE170;" FontFamily="Segoe UI Symbol" />

 if you want to use icons, symbols and special character in code behind and C# you can follow below, in C# you must use in different way and it add with '\u' 


     MyTextBlock.Text = "\uE170";
     MyFontIcon.Glyph = "\uE170";