How to adapt my custom icon (svg) to look like the standard available HABPanel icons?

Apps & Services HABPanel
1

I’ve just begun exploring HABPanel and at this moment I’m satisfied with the standard widgets HABPanel offers. However, I wanted to use a custom icon as a background for one of my dummy widgets, because I didn’t find an appropriate one in the default icon sets that are incorporated in HABPanel.

Adding a custom icon to the dummy widget succeeded without any problem. However, its color is different from the color of the standard icons I used in the other widgets of the dashboard (it’s pretty black and almost invisible, while the other, standard background icons look grey).

I suppose I need to change something in the svg-file (XML-file) of my custom icon, so that it shows up just like the standard ones? I wanted to take a look at the files of the standard icons, but I don’t know where to find them.

This is how the svg-file of my custom icon looks like in XML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
	<g>
		<path d="M6.979,271.181c30.288,25.979,64.616,55.426,131.017,55.426c66.403-0.001,100.733-29.447,131.022-55.426
			c28.644-24.568,53.382-45.787,104.98-45.787c51.599,0,76.337,21.219,104.98,45.787c8.385,7.191,21.011,6.225,28.202-2.159
			c7.191-8.385,6.225-21.011-2.16-28.202c-30.289-25.979-64.619-55.426-131.022-55.426S273.265,214.84,242.976,240.82
			c-28.644,24.568-53.382,45.787-104.98,45.787c-51.597,0-76.332-21.218-104.974-45.787c-8.384-7.191-21.01-6.226-28.202,2.159
			C-2.372,251.363-1.405,263.99,6.979,271.181z"/>
		<path d="M6.979,161.787c30.287,25.98,64.615,55.426,131.017,55.426c66.403,0,100.733-29.446,131.022-55.426
			C297.662,137.219,322.399,116,373.998,116c51.597,0,76.335,21.218,104.98,45.787c8.385,7.193,21.01,6.224,28.201-2.161
			c7.192-8.384,6.223-21.012-2.161-28.202C474.729,105.444,440.399,76,373.998,76c-66.403,0-100.733,29.446-131.022,55.426
			c-28.644,24.568-53.382,45.787-104.98,45.787c-51.596,0-76.332-21.218-104.974-45.787c-8.384-7.192-21.011-6.226-28.202,2.159
			C-2.372,141.969-1.405,154.596,6.979,161.787z"/>
		<path d="M505.02,350.213c-30.289-25.979-64.619-55.426-131.022-55.426s-100.733,29.446-131.022,55.426
			C214.332,374.781,189.594,396,137.996,396c-51.594,0-76.331-21.218-104.973-45.785l-0.002-0.002
			c-8.384-7.189-21.009-6.223-28.201,2.16c-7.191,8.384-6.224,21.011,2.16,28.202C37.268,406.555,71.597,436,137.996,436
			c66.403,0,100.733-29.446,131.022-55.426c28.644-24.568,53.382-45.787,104.98-45.787c51.599,0,76.337,21.219,104.98,45.787
			c8.385,7.191,21.011,6.225,28.202-2.159C514.371,370.03,513.405,357.404,505.02,350.213z"/>
	</g>
</svg>
2

The custom icons you add in icons/classic are not colorized with CSS contrary to the built-in ones.
You can work around this without relying on a custom widget by using a color close to what you want for the 3 paths in your CSS, for example:
(fill="#ccccee", YMMV, if you use a different theme you might want to adjust it)

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
	<g>
		<path fill="#ccccee" d="M6.979,271.181c30.288,25.979,64.616,55.426,131.017,55.426c66.403-0.001,100.733-29.447,131.022-55.426
			c28.644-24.568,53.382-45.787,104.98-45.787c51.599,0,76.337,21.219,104.98,45.787c8.385,7.191,21.011,6.225,28.202-2.159
			c7.191-8.385,6.225-21.011-2.16-28.202c-30.289-25.979-64.619-55.426-131.022-55.426S273.265,214.84,242.976,240.82
			c-28.644,24.568-53.382,45.787-104.98,45.787c-51.597,0-76.332-21.218-104.974-45.787c-8.384-7.191-21.01-6.226-28.202,2.159
			C-2.372,251.363-1.405,263.99,6.979,271.181z"/>
		<path fill="#ccccee" d="M6.979,161.787c30.287,25.98,64.615,55.426,131.017,55.426c66.403,0,100.733-29.446,131.022-55.426
			C297.662,137.219,322.399,116,373.998,116c51.597,0,76.335,21.218,104.98,45.787c8.385,7.193,21.01,6.224,28.201-2.161
			c7.192-8.384,6.223-21.012-2.161-28.202C474.729,105.444,440.399,76,373.998,76c-66.403,0-100.733,29.446-131.022,55.426
			c-28.644,24.568-53.382,45.787-104.98,45.787c-51.596,0-76.332-21.218-104.974-45.787c-8.384-7.192-21.011-6.226-28.202,2.159
			C-2.372,141.969-1.405,154.596,6.979,161.787z"/>
		<path fill="#ccccee" d="M505.02,350.213c-30.289-25.979-64.619-55.426-131.022-55.426s-100.733,29.446-131.022,55.426
			C214.332,374.781,189.594,396,137.996,396c-51.594,0-76.331-21.218-104.973-45.785l-0.002-0.002
			c-8.384-7.189-21.009-6.223-28.201,2.16c-7.191,8.384-6.224,21.011,2.16,28.202C37.268,406.555,71.597,436,137.996,436
			c66.403,0,100.733-29.446,131.022-55.426c28.644-24.568,53.382-45.787,104.98-45.787c51.599,0,76.337,21.219,104.98,45.787
			c8.385,7.191,21.011,6.225,28.202-2.159C514.371,370.03,513.405,357.404,505.02,350.213z"/>
	</g>
</svg>
1 Like