domjtalbot/Icon.cs

## _Icon.cshtml
@using Test.Models;
@{
    var icon = new Icon()
    {
        Name = (string)ViewData["iconName"]
    };
}


<svg xmlns="http://www.w3.org/2000/svg"
     class="icon"
     data-heicon="@icon.Name.ToLower()"
     width="44"
     height="44"
     viewBox="0 0 50 50"
>
    @Html.Raw(icon.getSVG())
</svg>

## _Layout.cshtml
<html>
  <head>
  </head>
  <body>
    @Html.Partial("_Icon", new ViewDataDictionary { { "iconName", "search" } })
  </body>
</html>

## Icon.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Xml;

namespace Test.Models
{
    /// <summary>
    /// Inject SVG icon into the page
    /// </summary>
    public class Icon
    {
        /// <summary>
        /// Initializes a new instance of <see cref="Icon" /> class.
        /// </summary>
        /// <remarks>Icon constructor</remarks>
        private Icon()
        {
            this.Folder = "~/Assets/icons/";
            this.Extension = ".svg";
        }

        /// <summary>
        /// Folder containing icons.
        /// </summary>
        /// <value>The Folder property gets/sets the folder path</value>
        public string Folder { get; set; }

        /// <summary>
        /// Extension used by icons.
        /// </summary>
        /// <value>The Extension property gets/sets the extension used for icons</value>
        public string Extension { get; set; }

        /// <summary>
        /// Icon name
        /// </summary>
        /// <value>The Name property gets/sets the name of requested icon.</value>
        public string Name { get; set; }

        /// <summary>
        /// The full path to the requested icon file.
        /// </summary>
        /// <value>The Path property gets the full file path</value>
        private string Path
        {
            get
            {
                var path = Folder + Name + Extension;
                return HttpContext.Current.Server.MapPath(Path);
            }
        }

        /// <summary>
        /// Get the SVG contents of the requested icon.
        /// </summary>
        /// <returns>Inner SVG XML</returns>
        /// <example>
        /// This shows how to call the <see cref="getSVG"/> method.
        /// <code>
        /// var icon = new Icon()
        /// {
        ///     Name = "menu"
        /// };
        /// var svg = icon.getSVG();
        /// </code>
        /// </example>
        public string getSVG()
        {
            string svg = File.ReadAllText(Path);
            XmlDocument contents = new XmlDocument();
            contents.LoadXml(svg);
            XmlNodeList rootNode = contents.GetElementsByTagName("svg");
            return rootNode[0].InnerXml;
        }
    }
}

## Search.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              Search.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	@using Test.Models;
	@{
	var icon = new Icon()
	{
	Name = (string)ViewData["iconName"]
	};
	}


	<svg xmlns="http://www.w3.org/2000/svg"
	class="icon"
	data-heicon="@icon.Name.ToLower()"
	width="44"
	height="44"
	viewBox="0 0 50 50"
	>
	@Html.Raw(icon.getSVG())
	</svg>
	<html>
	<head>
	</head>
	<body>
	@Html.Partial("_Icon", new ViewDataDictionary { { "iconName", "search" } })
	</body>
	</html>
	using System;
	using System.Collections.Generic;
	using System.IO;
	using System.Linq;
	using System.Web;
	using System.Xml;

	namespace Test.Models
	{
	/// <summary>
	/// Inject SVG icon into the page
	/// </summary>
	public class Icon
	{
	/// <summary>
	/// Initializes a new instance of <see cref="Icon" /> class.
	/// </summary>
	/// <remarks>Icon constructor</remarks>
	private Icon()
	{
	this.Folder = "~/Assets/icons/";
	this.Extension = ".svg";
	}

	/// <summary>
	/// Folder containing icons.
	/// </summary>
	/// <value>The Folder property gets/sets the folder path</value>
	public string Folder { get; set; }

	/// <summary>
	/// Extension used by icons.
	/// </summary>
	/// <value>The Extension property gets/sets the extension used for icons</value>
	public string Extension { get; set; }

	/// <summary>
	/// Icon name
	/// </summary>
	/// <value>The Name property gets/sets the name of requested icon.</value>
	public string Name { get; set; }

	/// <summary>
	/// The full path to the requested icon file.
	/// </summary>
	/// <value>The Path property gets the full file path</value>
	private string Path
	{
	get
	{
	var path = Folder + Name + Extension;
	return HttpContext.Current.Server.MapPath(Path);
	}
	}

	/// <summary>
	/// Get the SVG contents of the requested icon.
	/// </summary>
	/// <returns>Inner SVG XML</returns>
	/// <example>
	/// This shows how to call the <see cref="getSVG"/> method.
	/// <code>
	/// var icon = new Icon()
	/// {
	/// Name = "menu"
	/// };
	/// var svg = icon.getSVG();
	/// </code>
	/// </example>
	public string getSVG()
	{
	string svg = File.ReadAllText(Path);
	XmlDocument contents = new XmlDocument();
	contents.LoadXml(svg);
	XmlNodeList rootNode = contents.GetElementsByTagName("svg");
	return rootNode[0].InnerXml;
	}
	}
	}