# WinUI Markup Extensions

The Telerik WinUI suite contains several custom markup extensions, which can simplify the creation of BitmapIcon and FontIcon objects.

## BitmapIconExtension and BitmapIconSourceExtension

The BitmapIconExtension and BitmapIconSourceExtension classes can be used to provide a BitmapIcon and BitmapIconSource objects respectively. They expose the following properties:

* **Source** (Uri): Gets or sets the Uri representing the image to display.

* **ShowAsMonochrome** (bool): Gets or sets a value indicating whether to display the icon as monochrome.

#### \_*Example 1: Using the BitmapIconExtension and BitmapIconSourceExtension*

```XAML
    <StackPanel xmlns:telerik="using:Telerik.UI.Xaml.Controls"                          
                xmlns:telerikCore="using:Telerik.Core">
        <telerik:RadRibbonButton Content="Test" LargeIcon="{telerikCore:BitmapIcon Source=ms-appx:///Images/MyPicture1.png, ShowAsMonochrome=True}" />

        <IconSourceElement IconSource="{telerikCore:BitmapIconSource Source=ms-appx:///Images/MyPicture1.png, ShowAsMonochrome=True}" Width="10" Height="10" />
    </StackPanel>
```

## TextIconExtension

This is an abstract class that provides some common properties for the FontIconExtension, FontIconSourceExtension, SymbolIconExtension and SymbolIconSourceExtension classes:

* **FontSize** (double): Gets or sets the size of the icon to display.

* **FontWeight** (FontWeight): Gets or sets the thickness of the icon glyph.

* **FontStyle** (FontStyle): Gets or sets the font style for the icon glyph.

* **Foreground** (Brush): Gets or sets the foreground Brush for the icon.

* **IsTextScaleFactorEnabled** (bool): Gets or sets a value indicating whether automatic text enlargement, to reflect the system text size setting, is enabled.

* **MirroredWhenRightToLeft** (bool):  Gets or sets a value indicating whether the icon is mirrored when the flow direction is right to left.

## FontIconExtension and FontIconSourceExtension

The FontIconExtension and FontIconSourceExtension classes inherit the [TextIconExtension](https://www.telerik.com/winui/documentation/common/markupextensions#texticonextension). They can be used to provide FontIcon and FontIconSource objects respectively. They expose the following additional properties:

* **Glyph** (string): Gets or sets the string value representing the icon to display.

* **FontFamily** (FontFamily): Gets or sets the font family to use to display the icon. If null, "Segoe MDL2 Assets" will be used.

#### \_*Example 2: Using the FontIconExtension and FontIconSourceExtension*

```XAML
    <StackPanel xmlns:telerik="using:Telerik.UI.Xaml.Controls"
                xmlns:telerikCore="using:Telerik.Core">
        <telerik:RadRibbonButton Content="Test" Size="Large" LargeIcon="{telerikCore:FontIcon FontSize=15, FontStyle=Italic, FontWeight=Bold, Foreground=Red, Glyph=&#xE700;}" />

        <IconSourceElement IconSource="{telerikCore:FontIconSource FontSize=15, FontStyle=Italic, FontWeight=Bold, Foreground=Red, Glyph=&#xE700;}" />
    </StackPanel>
```

## SymbolIconExtension and SymbolIconSourceExtension

The SymbolIconExtension and SymbolIconSourceExtension classes inherit the [TextIconExtension](https://www.telerik.com/winui/documentation/common/markupextensions#texticonextension). They can be used to provide FontIcon and FontIconSource objects respectively. They expose the following additional properties:

* **Symbol** (Symbol): Gets or sets the Symbol value representing the icon to display.

#### \_*Example 3: Using the SymbolIconExtension and SymbolIconSourceExtension*

```XAML
    <StackPanel xmlns:telerik="using:Telerik.UI.Xaml.Controls"
                xmlns:telerikCore="using:Telerik.Core">
        <telerik:RadRibbonButton Content="Test" Size="Large" LargeIcon="{telerikCore:SymbolIcon FontSize=15, FontStyle=Italic, FontWeight=Bold, Foreground=Red, Symbol=Add}" />

        <IconSourceElement IconSource="{telerikCore:SymbolIconSource FontSize=15, FontStyle=Italic, FontWeight=Bold, Foreground=Red, Symbol=Add}" />
    </StackPanel>
```

> You can find a list of possible values for the Symbol property in [this MSDN article](https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.symbol).

## See Also

* [Accessibility](https://www.telerik.com/winui/documentation/common/accessibility)