Use custom svg for navicon

Ignition Early Access
2

Hi @nader.chinichian, the best way to do this is to create your own SVG icon sprite file in the same format as the material or ignition icon sprite files (format show below). This file will then live under the <gateway install>\data\modules\com.inductiveautomation.perspective\icons directory (you’ll see the material and ignition icon sprites in this directory). You’ll then reference your icon by sprite-file-name\icon-id inside of the designer.

SVG Icon Sprite File Format

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			.icon { display: none }
			.icon:target { display: inline }
		</style>
	</defs>
	<svg viewBox="0 0 16 16">
		<g class="icon" id="about">
			<path d="M9,3l-2.62268e-07,7.10543e-15c-3.31371,1.44847e-07 -6,2.68629 -6,6c1.44847e-07,3.31371 2.68629,6 6,6c3.31371,-1.44847e-07 6,-2.68629 6,-6l5.32907e-15,2.62268e-07c0,-3.31371 -2.68629,-6 -6,-6Zm2,8.75v0c0,0.138071 -0.111929,0.25 -0.25,0.25h-3.5h-1.09278e-08c-0.138071,-6.03528e-09 -0.25,-0.111929 -0.25,-0.25c0,0 0,0 0,0v-0.5l2.66454e-15,-2.68211e-08c2.08482e-08,-0.138071 0.111929,-0.25 0.25,-0.25h0.75v-2h-0.75h-1.09278e-08c-0.138071,-6.03528e-09 -0.25,-0.111929 -0.25,-0.25c0,0 0,0 0,0v-0.5l2.66454e-15,-2.68211e-08c2.08482e-08,-0.138071 0.111929,-0.25 0.25,-0.25h2.49l-1.1365e-08,1.77636e-15c0.143594,-6.27669e-09 0.26,0.116406 0.26,0.26v2.74h0.75h-1.09278e-08c0.138071,-6.03528e-09 0.25,0.111929 0.25,0.25Zm-2.74,-6.75h1.48h-1.1365e-08c0.143594,-6.27669e-09 0.26,0.116406 0.26,0.26v1.48v0c0,0.143594 -0.116406,0.26 -0.26,0.26h-1.48h-1.1365e-08c-0.143594,-6.27669e-09 -0.26,-0.116406 -0.26,-0.26v-1.48l3.55271e-15,-3.92589e-08c2.16821e-08,-0.143594 0.116406,-0.26 0.26,-0.26Z"></path>
		</g>
	</svg>
	
    ...

</svg>
1 Like