Display Telerik.SvgIcons in RadSvgImage

Environment

Product Version	2023.3.1115
Product	RadSvgImage for WPF

Description

How to display SVG icons from the Telerik.SvgIcons NuGet package in RadSvgImage.

Solution

1. Add the Telerik.SvgIcons NuGet package in your application.

1. You can utilize the XmlSource property of RadSvgImage to display the Content property of the chosen SVG icon.

RadSvgImage declaration

• XAML

<Grid xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"> 
    <telerik:RadSvgImage x:Name="svgImage" Width="128" Height="128"/> 
</Grid> 

Setting the XmlSource property

• C#
• VB.NET

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
        InitializeComponent(); 
 
        string baseSvgBody = "<svg xmlns = \"http://www.w3.org/2000/svg\"&gt;{0}&lt;/svg&gt;"; 
 
        this.svgImage.XmlSource = string.Format(baseSvgBody, Telerik.SvgIcons.SvgIcon.ChartScatter.Content); 
    } 
} 

Public Partial Class MainWindow 
    Inherits Window 
 
    Public Sub New() 
        InitializeComponent() 
        Dim baseSvgBody As String = "<svg xmlns = ""http://www.w3.org/2000/svg""&gt;{0}&lt;/svg&gt;" 
        Me.svgImage.XmlSource = String.Format(baseSvgBody, Telerik.SvgIcons.SvgIcon.ChartScatter.Content) 
    End Sub 
End Class 

RadSvgImage displaying SVG icon from the Telerik.SvgIcons NuGet package