Power Platform Community Forum Thread Details

I am looking into using SVG images for buttons as opposed to the builtin icons as there is such a limited set. The key is that I want to have the ability for the Hover and Pressed functionality. With a little research I found that you can use CSS Style commands within the SVG code. So I created the below that works fine in a HTML file or in something like CodePen. When I add this to an image the base fill color is used but the hover and active attributes are never applied to the image. I could probably work through doing this a bit in reverse where I change the background color but depending on the background color one would want to change the forecolor/text color which cant be done. Anyone have any thoughts?

<svg version='1.1' class='icon' 
	 viewBox='0 0 512 512' fill='black' width='100px' height='100px'>
<style>
 .icon{fill: black}
 .icon:hover{fill:blue}
 .icon:active{fill:green}
 </style>
 <g >
<g>
	<g>
		<path d='M108.512,275.939c4.15,0,7.515-3.364,7.515-7.515v-5.21c0-11.984-9.157-21.87-20.841-23.03v-8.231
			c0-4.151-3.365-7.515-7.515-7.515c-4.15,0-7.515,3.364-7.515,7.515v8.591c-11.858,2.299-20.841,12.756-20.841,25.275
			c0,14.199,11.552,25.75,25.75,25.75h5.21c5.912,0,10.721,4.809,10.721,10.721s-4.809,10.721-10.721,10.721h-7.815
			c-4.475,0-8.116-3.641-8.116-8.117c0-4.151-3.365-7.515-7.515-7.515c-4.15,0-7.515,3.364-7.515,7.515
			c0,11.984,9.156,21.87,20.841,23.03v8.231c0,4.151,3.365,7.515,7.515,7.515c4.15,0,7.515-3.364,7.515-7.515v-8.591
			c11.858-2.299,20.841-12.756,20.841-25.275c0-14.199-11.552-25.75-25.75-25.75h-5.21c-5.912,0-10.721-4.809-10.721-10.721
			s4.809-10.721,10.721-10.721h7.815c4.475,0,8.116,3.641,8.116,8.117v5.21C100.997,272.575,104.362,275.939,108.512,275.939z'/>
	</g>
</g>
<g>
	<g>
		<path d='M276.841,83.563c4.151,0,7.515-3.364,7.515-7.515v-5.21c0-11.984-9.157-21.87-20.841-23.03v-8.231
			c0-4.151-3.364-7.515-7.515-7.515c-4.15,0-7.515,3.364-7.515,7.515v8.591c-11.858,2.299-20.841,12.756-20.841,25.275
			c0,14.199,11.552,25.75,25.75,25.75h5.21c5.912,0,10.721,4.809,10.721,10.721s-4.809,10.721-10.721,10.721h-7.815
			c-4.475,0-8.116-3.641-8.116-8.117c0-4.151-3.365-7.515-7.515-7.515s-7.515,3.364-7.515,7.515c0,11.984,9.156,21.87,20.841,23.03
			v8.231c0,4.151,3.365,7.515,7.515,7.515c4.151,0,7.515-3.364,7.515-7.515v-8.591c11.857-2.299,20.841-12.756,20.841-25.275
			c0-14.199-11.552-25.75-25.75-25.75h-5.21c-5.912,0-10.721-4.809-10.721-10.721s4.809-10.721,10.721-10.721h7.815
			c4.475,0,8.116,3.641,8.116,8.117v5.21C269.326,80.2,272.69,83.563,276.841,83.563z'/>
	</g>
</g>
<g>
	<g>
		<path d='M424.329,148.29c-21.722,0-41.622,7.945-56.954,21.076l-37.201-31.001c8.545-13.527,13.497-29.538,13.497-46.686
			c0-48.342-39.329-87.671-87.671-87.671s-87.671,39.329-87.671,87.671c0,25.365,10.831,48.243,28.107,64.266l-61.262,54.455
			c-13.697-8.864-30.009-14.017-47.503-14.017C39.329,196.384,0,235.712,0,284.055s39.329,87.671,87.671,87.671
			c48.342,0,87.671-39.329,87.671-87.671c0-25.365-10.831-48.243-28.107-64.267l61.262-54.455
			c13.697,8.864,30.009,14.017,47.503,14.017c25.798,0,49.027-11.203,65.084-28.996l35.713,29.76
			c-12.573,15.177-20.139,34.644-20.139,55.846c0,48.342,39.329,87.671,87.671,87.671c48.342,0,87.671-39.329,87.671-87.671
			S472.671,148.29,424.329,148.29z M160.313,284.055c0,40.055-32.587,72.642-72.642,72.642s-72.642-32.587-72.642-72.642
			c0-40.055,32.587-72.642,72.642-72.642C127.726,211.413,160.313,244,160.313,284.055z M256,164.321
			c-40.055,0-72.642-32.587-72.642-72.642S215.945,19.037,256,19.037s72.642,32.587,72.642,72.642S296.055,164.321,256,164.321z
			 M424.329,308.603c-40.055,0-72.642-32.587-72.642-72.642c0-18.9,7.26-36.133,19.132-49.068c1.195-0.44,2.298-1.182,3.173-2.231
			c0.565-0.678,0.982-1.43,1.271-2.213c12.935-11.869,30.166-19.129,49.065-19.129c40.055,0,72.642,32.587,72.642,72.642
			C496.971,276.016,464.384,308.603,424.329,308.603z'/>
	</g>
</g>
<g>
	<g>
		<path d='M445.169,227.845c4.151,0,7.515-3.364,7.515-7.515v-5.21c0-11.984-9.157-21.87-20.841-23.03v-8.231
			c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515v8.591c-11.857,2.299-20.841,12.756-20.841,25.275
			c0,14.199,11.552,25.75,25.75,25.75h5.209c5.912,0,10.721,4.809,10.721,10.721c0,5.912-4.809,10.721-10.721,10.721h-7.815
			c-4.475,0-8.116-3.641-8.116-8.117c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515
			c0,11.984,9.156,21.87,20.841,23.03v8.231c0,4.151,3.364,7.515,7.515,7.515c4.151,0,7.515-3.364,7.515-7.515v-8.591
			c11.857-2.299,20.841-12.756,20.841-25.275c0-14.199-11.552-25.75-25.75-25.75h-5.209c-5.912,0-10.721-4.809-10.721-10.721
			s4.809-10.721,10.721-10.721h7.815c4.475,0,8.116,3.641,8.116,8.117v5.21C437.655,224.481,441.018,227.845,445.169,227.845z'/>
	</g>
</g>
<g>
	<g>
		<path d='M159.812,396.775H95.687c-4.15,0-7.515,3.364-7.515,7.515v96.188c0,4.151,3.365,7.515,7.515,7.515h64.125
			c4.15,0,7.515-3.364,7.515-7.515V404.29C167.327,400.138,163.962,396.775,159.812,396.775z M152.297,492.963h-49.096v-81.159
			h49.096V492.963z'/>
	</g>
</g>
<g>
	<g>
		<path d='M472.423,396.775h-64.125c-4.151,0-7.515,3.364-7.515,7.515v96.188c0,4.151,3.364,7.515,7.515,7.515h64.125
			c4.151,0,7.515-3.364,7.515-7.515V404.29C479.937,400.138,476.574,396.775,472.423,396.775z M464.908,492.963h-49.096v-81.159
			h49.096V492.963z'/>
	</g>
</g>
<g>
	<g>
		<path d='M264.016,428.34c4.151,0,7.515-3.364,7.515-7.515V308.102c0-4.151-3.364-7.515-7.515-7.515H199.89
			c-4.15,0-7.515,3.364-7.515,7.515v192.376c0,4.151,3.365,7.515,7.515,7.515h64.125c4.151,0,7.515-3.364,7.515-7.515v-44.585
			c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515v37.07h-49.096V315.616h49.096v105.208
			C256.501,424.976,259.865,428.34,264.016,428.34z'/>
	</g>
</g>
<g>
	<g>
		<path d='M368.219,348.681h-64.125c-4.151,0-7.515,3.364-7.515,7.515v144.282c0,4.151,3.364,7.515,7.515,7.515h64.125
			c4.151,0,7.515-3.364,7.515-7.515V356.196C375.734,352.045,372.37,348.681,368.219,348.681z M360.705,492.963h-49.096V363.71
			h49.096V492.963z'/>
	</g>
</g></g>
</svg>

Categories:

Building Power Apps