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.

   

2. 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#

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            string baseSvgBody = "<svg xmlns = \"http://www.w3.org/2000/svg\">{0}</svg>";

            this.svgImage.XmlSource = string.Format(baseSvgBody, Telerik.SvgIcons.SvgIcon.ChartScatter.Content);
        }
    }

VB.NET

    Public Partial Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
            Dim baseSvgBody As String = "<svg xmlns = ""http://www.w3.org/2000/svg"">{0}</svg>"
            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