fix: uploaded svg icon not showing

src/block/carousel/style.js

@@ -107,6 +107,15 @@ const Styles = props => {
 				key="arrowIconColor"
 				hover="all"
 			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=".stk-block-carousel__button svg.ugb-custom-icon path"
+				hoverSelector=".stk-block-carousel__button svg.ugb-custom-icon path:hover"
+				styleRule="fill"
+				attrName="arrowIconColor"
+				key="arrowIconColor"
+				hover="all"
+			/>
 			<BlockCss
 				{ ...propsToPass }
 				styleRule="--button-width"

src/block/icon-list-item/style.scss

@@ -16,6 +16,12 @@
 		border-width: 1px;
 		border-color: rgba(0, 0, 0, 0.4);
 	}
+
+	// Apply the color to the SVG path on the defintion
+	svg.ugb-custom-icon path {
+		fill: var(--stk-icon-list-marker-color);
+		color: var(--stk-icon-list-marker-color);
+	}
 }
 
 .stk-block-icon-list-item__content {

src/block/map/util.js

@@ -64,6 +64,12 @@ export const getIconOptions = attributes => {
 	svgEl.setAttribute( 'style', `color: ${ iconColor1 || DEFAULT_ICON_COLOR }; opacity: ${ iconOpacity || iconOpacity === 0 ? parseFloat( iconOpacity, 10 ) : DEFAULT_ICON_OPACITY }` )
 	svgEl.setAttribute( 'transform', `rotate(${ iconRotation || iconRotation === 0 ? parseInt( iconRotation, 10 ) : DEFAULT_ICON_ROTATION })` )
 
+	// Apply the fill directly to the path elements
+	const pathElements = svgEl.querySelectorAll( 'path' )
+	pathElements.forEach( pathElement => {
+		pathElement.setAttribute( 'style', `fill: ${ iconColor1 || DEFAULT_ICON_COLOR }; color: ${ iconColor1 || DEFAULT_ICON_COLOR }; opacity: ${ iconOpacity || iconOpacity === 0 ? parseFloat( iconOpacity, 10 ) : DEFAULT_ICON_OPACITY }` )
+	} )
+
 	const serializedString = new XMLSerializer().serializeToString( svgEl ) //eslint-disable-line no-undef
 	const iconUrl = `data:image/svg+xml;base64,${ window.btoa( serializedString ) }`
 	const iconOptions = { url: iconUrl }