fix icon colors not being shown/applied

Author: kaeizen

src/block-components/icon/index.js

@@ -202,6 +202,12 @@ export const Icon = props => {
 			return
 		}
 
+		// Don't use page icons for multicolor icons
+		// because we target svg elements with the :nth-of-type() selector to apply the multicolor styles.
+		if ( getAttribute( 'iconColorType' ) === 'multicolor' ) {
+			return
+		}
+
 		// Check if icon exists in pageIcons Map
 		// The Map structure is: [SVG string (key), { id: iconId, count: number } (value)]
 		if ( _icon ) {

src/plugins/page-icons/index.js

@@ -28,7 +28,8 @@ pageIconsWrapper?.setAttribute( 'id', 'stk-page-icons' )
 domReady( () => {
 	if ( pageIconsWrapper ) {
 		pageIconsWrapper.setAttribute( 'id', 'stk-page-icons' )
-		pageIconsWrapper.setAttribute( 'style', 'display: none;' )
+		// Don't use `display: none` to hide the page icons because it prevents gradients from being applied.
+		pageIconsWrapper.setAttribute( 'style', 'position: absolute; top: 0; left: -9999px; width: 0; height: 0; visibility: hidden;' )
 		createRoot( pageIconsWrapper ).render( <PageIcons /> )
 	}
 } )