PIKADEMIA

Projekt edukacji alternatywnej

How to add custom svg icon to wordpress menu

There are two ways of adding a custom svg icon

Solution 1. Use icon ascii code

This solution will change icon color to the color prefered by wordpress

First we need to change svg binary format to the ascii format
Open the svg in the text editor and copy the text inside <svg> tag without quotes. Open chrome console, type js function btoa() and as an argument pass the icon code. In this example I’ll use one of icons from here: https://www.flaticon.com/search?filter_style=lineal-color&order_by=4

btoa(`svg text goes here`)

Now, in the right spot of wordpress add this line of code

'data:image/svg+xml;base64,xyz'

The icon I chose was converted to this code, so this all should go to xyz place above

PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0ODAuOCA0ODAuOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDgwLjggNDgwLjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGRDUxNzsiIGQ9Ik0zMTcuMTEyLDMxNC40Yy0yMi40LDIyLjQtMTkuNiw2Ny42LTE5LjYsNjcuNmgtMTEzLjZjMCwwLDIuNC00NS4yLTE5LjYtNjcuNgoJYy0yNC40LTIxLjYtNDAtNTIuOC00MC04Ny42YzAtNjQsNTItMTE2LDExNi0xMTZzMTE2LDUyLDExNiwxMTZDMzU2LjMxMiwyNjEuNiwzNDEuMTEyLDI5Mi44LDMxNy4xMTIsMzE0LjRMMzE3LjExMiwzMTQuNHoiLz4KPGc+Cgk8cGF0aCBzdHlsZT0iZmlsbDojRTVFNUU1OyIgZD0iTTMwMC43MTIsNDE3LjZjMCw2LTQuOCwxMC44LTEwLjgsMTAuOGgtOTguOGMtNiwwLTEwLjgtNC44LTEwLjgtMTAuOGwwLDBjMC02LDQuOC0xMC44LDEwLjgtMTAuOAoJCWg5OC40QzI5NS41MTIsNDA2LjgsMzAwLjcxMiw0MTEuNiwzMDAuNzEyLDQxNy42TDMwMC43MTIsNDE3LjZ6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojRTVFNUU1OyIgZD0iTTI4NS45MTIsNDYyLjRjMCw2LTQuOCwxMC44LTEwLjgsMTAuOGgtNjkuMmMtNiwwLTEwLjgtNC44LTEwLjgtMTAuOGwwLDBjMC02LDQuOC0xMC44LDEwLjgtMTAuOAoJCWg2OS4yQzI4MS4xMTIsNDUxLjYsMjg1LjkxMiw0NTYuNCwyODUuOTEyLDQ2Mi40TDI4NS45MTIsNDYyLjR6Ii8+CjwvZz4KPGc+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMjEwQjIwOyIgZD0iTTMyMy4xMTIsMzE4LjRjMjYtMjMuNiw0MC44LTU2LjgsNDAuOC05MS42YzAtNjgtNTUuNi0xMjMuNi0xMjMuNi0xMjMuNnMtMTIzLjYsNTUuNi0xMjMuNiwxMjMuNgoJCWMwLDM1LjYsMTUuNiw2OS42LDQyLDkyLjhjMTkuNiwxOS42LDE3LjYsNjEuMiwxNy42LDYxLjZjMCwyLDAuOCw0LDIsNS42YzEuNiwxLjYsMy42LDIuNCw1LjYsMi40aDExMy4yYzIsMCw0LTAuOCw1LjYtMi40CgkJczItMy42LDItNS42YzAtMC40LTItNDIsMTcuNi02MS42QzMyMi43MTIsMzE5LjIsMzIzLjExMiwzMTguOCwzMjMuMTEyLDMxOC40eiBNMzExLjkxMiwzMDguNGMtMC44LDAuNC0xLjIsMS4yLTEuNiwyCgkJYy0xNy42LDE4LjgtMjAuNCw0OS42LTIwLjgsNjRoLTk4Yy0wLjQtMTQuOC0zLjYtNDYuOC0yMi40LTY1LjZjLTIzLjYtMjAuOC0zNy4yLTUwLjQtMzcuMi04MS42YzAtNjAsNDguOC0xMDguNCwxMDguNC0xMDguNAoJCWM2MCwwLDEwOC40LDQ4LjgsMTA4LjQsMTA4LjRDMzQ4LjcxMiwyNTgsMzM1LjUxMiwyODgsMzExLjkxMiwzMDguNHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiMyMTBCMjA7IiBkPSJNMjQwLjMxMiwxMzUuMmMtNCwwLTcuNiwzLjItNy42LDcuNmMwLDQsMy4yLDcuNiw3LjYsNy42YzQ0LjgsMCw4MS4yLDM2LjQsODEuMiw4MS4yCgkJYzAsNCwzLjIsNy42LDcuNiw3LjZjNCwwLDcuNi0zLjIsNy42LTcuNkMzMzYuNzEyLDE3OC40LDI5My41MTIsMTM1LjIsMjQwLjMxMiwxMzUuMnoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiMyMTBCMjA7IiBkPSJNMzA4LjMxMiw0MTcuNmMwLTEwLjQtOC40LTE4LjQtMTguNC0xOC40aC05OC44Yy0xMC40LDAtMTguNCw4LjQtMTguNCwxOC40CgkJYzAsMTAuNCw4LjQsMTguNCwxOC40LDE4LjRoOTguNEMyOTkuOTEyLDQzNiwzMDguMzEyLDQyOCwzMDguMzEyLDQxNy42eiBNMjg5LjUxMiw0MjAuOGgtOTguNGMtMiwwLTMuMi0xLjYtMy4yLTMuMgoJCWMwLTIsMS42LTMuMiwzLjItMy4yaDk4LjRjMiwwLDMuMiwxLjYsMy4yLDMuMkMyOTMuMTEyLDQxOS42LDI5MS41MTIsNDIwLjgsMjg5LjUxMiw0MjAuOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiMyMTBCMjA7IiBkPSJNMjc1LjExMiw0NDRoLTY5LjJjLTEwLjQsMC0xOC40LDguNC0xOC40LDE4LjRjMCwxMC40LDguNCwxOC40LDE4LjQsMTguNGg2OS4yCgkJYzEwLjQsMCwxOC40LTguNCwxOC40LTE4LjRDMjkzLjUxMiw0NTIuNCwyODUuMTEyLDQ0NCwyNzUuMTEyLDQ0NHogTTI3NS4xMTIsNDY1LjZoLTY5LjJjLTIsMC0zLjItMS42LTMuMi0zLjIKCQljMC0yLDEuNi0zLjIsMy4yLTMuMmg2OS4yYzIsMCwzLjIsMS42LDMuMiwzLjJDMjc4LjMxMiw0NjQuNCwyNzcuMTEyLDQ2NS42LDI3NS4xMTIsNDY1LjZ6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMjEwQjIwOyIgZD0iTTI0Ny45MTIsNTguOFY3LjZjMC00LTMuMi03LjYtNy42LTcuNmMtNCwwLTcuNiwzLjItNy42LDcuNnY1MS42YzAsNCwzLjIsNy42LDcuNiw3LjYKCQlDMjQ0LjcxMiw2Ni40LDI0Ny45MTIsNjMuMiwyNDcuOTEyLDU4Ljh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMjEwQjIwOyIgZD0iTTM2Ni4zMTIsMzhjLTMuNi0yLjQtOC0xLjItMTAuNCwybC0yOC40LDQyLjhjLTIuNCwzLjYtMS4yLDgsMiwxMC40YzEuMiwwLjgsMi44LDEuMiw0LDEuMgoJCWMyLjQsMCw0LjgtMS4yLDYuNC0zLjJsMjguNC00Mi44QzM3MC43MTIsNDUuMiwzNjkuNTEyLDQwLjQsMzY2LjMxMiwzOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiMyMTBCMjA7IiBkPSJNMTQ5LjkxMiw5Mi44YzEuMiwwLDIuOC0wLjQsNC0xLjJjMy42LTIuNCw0LjQtNi44LDIuNC0xMC40bC0yNy42LTQzLjJjLTIuNC0zLjYtNi44LTQuNC0xMC40LTIuNAoJCWMtMy42LDIuNC00LjQsNi44LTIuNCwxMC40bDI3LjYsNDMuMkMxNDUuMTEyLDkxLjYsMTQ3LjUxMiw5Mi44LDE0OS45MTIsOTIuOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiMyMTBCMjA7IiBkPSJNNDMuOTEyLDEyOC44bDQ1LjIsMjQuNGMxLjIsMC44LDIuNCwwLjgsMy42LDAuOGMyLjgsMCw1LjItMS42LDYuOC00YzItMy42LDAuOC04LjQtMy4yLTEwLjQKCQlsLTQ1LjItMjQuNGMtMy42LTItOC40LTAuOC0xMC40LDMuMkMzOS4xMTIsMTIyLjQsNDAuMzEyLDEyNi44LDQzLjkxMiwxMjguOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiMyMTBCMjA7IiBkPSJNMzg3LjkxMiwxNTQuNGMxLjIsMCwyLjQtMC40LDMuNi0wLjhsNDUuMi0yNC40YzMuNi0yLDUuMi02LjQsMy4yLTEwLjRjLTItMy42LTYuNC01LjItMTAuNC0zLjIKCQlsLTQ1LjIsMjQuNGMtMy42LDItNS4yLDYuNC0zLjIsMTAuNEMzODIuMzEyLDE1Mi44LDM4NS4xMTIsMTU0LjQsMzg3LjkxMiwxNTQuNHoiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4=

Solution 2. Add icon file to your project

This solution will keep icon color as it is but not all icons will look nice as they are..
Copy svg file and place it within your project. Next in the right spot add line of code:

plugin_dir_url(__FILE__).'custom.svg'