@elementor/editor-controls 4.3.4 → 4.3.5

package/src/controls/icon-library/icon-library-filter.tsx

@@ -1,10 +1,20 @@
 import * as React from 'react';
 import { useId } from 'react';
-import { CheckIcon, FilterIcon, LibraryIcon, ListIcon, StarFilledIcon, StarIcon } from '@elementor/icons';
+import {
+	CheckIcon,
+	FilterIcon,
+	LibraryIcon,
+	MenuIcon,
+	RosetteDiscountCheckIcon,
+	StarFilledIcon,
+	StarIcon,
+} from '@elementor/icons';
 import {
 	bindMenu,
 	bindToggle,
 	Box,
+	Divider,
+	ListSubheader,
 	Menu,
 	MenuItem,
 	Stack,
@@ -15,43 +25,36 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import {
-	FONT_AWESOME_7_LIBRARIES,
-	type FontAwesome7Library,
-	type FontAwesome7LibraryFilter,
-} from './font-awesome-7-catalog';
+import { type FontAwesome7LibraryFilter } from './font-awesome-7-catalog';
 import { ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY } from './icon-library-tooltip';
 
 const FILTER_MENU_WIDTH = 280;
 const FILTER_INDICATOR_SIZE = 6;
-const FILTER_INDICATOR_OFFSET = 4;
-const LIBRARY_FILTER_ORDER = {
-	regular: 0,
-	solid: 1,
-	brands: 2,
-} as const;
-
-const LIBRARY_FILTER_CONFIG: Record<
-	FontAwesome7Library,
-	{ getLabel: () => string; Icon: typeof StarIcon; order: number }
-> = {
-	'fa-regular': {
-		getLabel: () => __( 'Font Awesome - Regular', 'elementor' ),
-		Icon: StarIcon,
-		order: LIBRARY_FILTER_ORDER.regular,
-	},
-	'fa-solid': {
-		getLabel: () => __( 'Font Awesome - Solid', 'elementor' ),
-		Icon: StarFilledIcon,
-		order: LIBRARY_FILTER_ORDER.solid,
-	},
-	'fa-brands': {
-		getLabel: () => __( 'Font Awesome - Brands', 'elementor' ),
-		Icon: LibraryIcon,
-		order: LIBRARY_FILTER_ORDER.brands,
-	},
+const FILTER_INDICATOR_CORNER_OFFSET = -( FILTER_INDICATOR_SIZE / 2 );
+const FILTER_TYPE_ALL = 'all';
+const FILTER_TYPE_GROUP = 'group';
+const FILTER_TYPE_ITEM = 'item';
+
+const FILTER_ICONS: Record< string, typeof MenuIcon > = {
+	list: MenuIcon,
+	star: StarIcon,
+	'star-filled': StarFilledIcon,
+	library: LibraryIcon,
+	rosette: RosetteDiscountCheckIcon,
 };
 
+const DEFAULT_FILTER = [
+	{ type: FILTER_TYPE_ALL, label: 'All icons', icon: 'list' },
+	{ type: FILTER_TYPE_ITEM, value: 'fa-regular', label: 'Font Awesome - Regular', icon: 'star' },
+	{ type: FILTER_TYPE_ITEM, value: 'fa-solid', label: 'Font Awesome - Solid', icon: 'star-filled' },
+	{ type: FILTER_TYPE_ITEM, value: 'fa-brands', label: 'Font Awesome - Brands', icon: 'rosette' },
+] as const;
+
+type FilterEntry =
+	| { type: typeof FILTER_TYPE_ALL; label: string; icon?: string }
+	| { type: typeof FILTER_TYPE_GROUP; label: string }
+	| { type: typeof FILTER_TYPE_ITEM; value: string; label: string; icon?: string };
+
 type IconLibraryFilterProps = {
 	value: FontAwesome7LibraryFilter;
 	onChange: ( value: FontAwesome7LibraryFilter ) => void;
@@ -63,27 +66,19 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 		variant: 'popover',
 		popupId,
 	} );
-	const options = FONT_AWESOME_7_LIBRARIES.map( ( { library } ) => ( {
-		value: library,
-		label: LIBRARY_FILTER_CONFIG[ library ].getLabel(),
-		Icon: LIBRARY_FILTER_CONFIG[ library ].Icon,
-		order: LIBRARY_FILTER_CONFIG[ library ].order,
-	} ) ).sort( ( firstOption, secondOption ) => firstOption.order - secondOption.order );
+	const entries = getFilterEntries();
+	const selectableValues = entries.flatMap( ( entry ) => ( entry.type === FILTER_TYPE_ITEM ? [ entry.value ] : [] ) );
 	const isFiltered = value.length > 0;
 	const filterButtonLabel = isFiltered
 		? __( 'Filter by library, active', 'elementor' )
 		: __( 'Filter by library', 'elementor' );
 
-	const handleAllIconsClick = () => {
-		onChange( [] );
-	};
-
-	const handleLibraryClick = ( library: FontAwesome7Library ) => {
+	const handleLibraryClick = ( library: string ) => {
 		const nextValue = value.includes( library )
 			? value.filter( ( selectedLibrary ) => selectedLibrary !== library )
 			: [ ...value, library ];
 
-		onChange( nextValue.length === FONT_AWESOME_7_LIBRARIES.length ? [] : nextValue );
+		onChange( nextValue.length === selectableValues.length ? [] : nextValue );
 	};
 
 	return (
@@ -100,7 +95,7 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 					value="filter"
 					size="tiny"
 					selected={ popupState.isOpen }
-					sx={ { position: 'relative', flexShrink: 0 } }
+					sx={ { position: 'relative', flexShrink: 0, overflow: 'visible' } }
 					{ ...bindToggle( popupState ) }
 					aria-expanded={ popupState.isOpen }
 				>
@@ -111,12 +106,12 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 							aria-hidden="true"
 							sx={ {
 								position: 'absolute',
-								insetBlockStart: FILTER_INDICATOR_OFFSET,
-								insetInlineEnd: FILTER_INDICATOR_OFFSET,
+								insetBlockStart: FILTER_INDICATOR_CORNER_OFFSET,
+								insetInlineEnd: FILTER_INDICATOR_CORNER_OFFSET,
 								width: FILTER_INDICATOR_SIZE,
 								height: FILTER_INDICATOR_SIZE,
 								borderRadius: '50%',
-								bgcolor: 'secondary.main',
+								bgcolor: 'text.primary',
 							} }
 						/>
 					) : null }
@@ -131,31 +126,63 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 				} }
 				sx={ { '& .MuiPaper-root': { minWidth: FILTER_MENU_WIDTH } } }
 			>
-				<MenuItem
-					role="menuitemcheckbox"
-					aria-checked={ ! isFiltered }
-					selected={ ! isFiltered }
-					onClick={ handleAllIconsClick }
-				>
-					{ renderFilterMenuItemContent( __( 'All icons', 'elementor' ), ListIcon, ! isFiltered ) }
-				</MenuItem>
-				{ options.map( ( { value: library, label, Icon } ) => (
-					<MenuItem
-						key={ library }
-						role="menuitemcheckbox"
-						aria-checked={ value.includes( library ) }
-						selected={ value.includes( library ) }
-						onClick={ () => handleLibraryClick( library ) }
-					>
-						{ renderFilterMenuItemContent( label, Icon, value.includes( library ) ) }
-					</MenuItem>
-				) ) }
+				{ entries.flatMap( ( entry, index ) =>
+					renderFilterEntry( entry, index, value, isFiltered, () => onChange( [] ), handleLibraryClick )
+				) }
 			</Menu>
 		</>
 	);
 };
 
-const renderFilterMenuItemContent = ( label: string, Icon: typeof ListIcon, selected: boolean ) => (
+const renderFilterEntry = (
+	entry: FilterEntry,
+	index: number,
+	selectedLibraries: FontAwesome7LibraryFilter,
+	isFiltered: boolean,
+	onAllIconsClick: () => void,
+	onLibraryClick: ( library: string ) => void
+): React.ReactNode[] => {
+	if ( entry.type === FILTER_TYPE_GROUP ) {
+		return [
+			<Divider key={ `divider-${ index }` } />,
+			<ListSubheader key={ `group-${ index }` } disableSticky>
+				{ entry.label }
+			</ListSubheader>,
+		];
+	}
+
+	if ( entry.type === FILTER_TYPE_ALL ) {
+		return [
+			<MenuItem
+				key={ `all-${ index }` }
+				role="menuitemcheckbox"
+				aria-checked={ ! isFiltered }
+				selected={ ! isFiltered }
+				onClick={ onAllIconsClick }
+			>
+				{ renderFilterMenuItemContent( entry.label, getFilterIcon( entry.icon ), ! isFiltered ) }
+			</MenuItem>,
+		];
+	}
+
+	const isSelected = selectedLibraries.includes( entry.value );
+
+	return [
+		<MenuItem
+			key={ entry.value }
+			role="menuitemcheckbox"
+			aria-checked={ isSelected }
+			selected={ isSelected }
+			onClick={ () => onLibraryClick( entry.value ) }
+		>
+			{ renderFilterMenuItemContent( entry.label, getFilterIcon( entry.icon ), isSelected ) }
+		</MenuItem>,
+	];
+};
+
+const getFilterIcon = ( icon?: string ) => FILTER_ICONS[ icon ?? '' ] ?? LibraryIcon;
+
+const renderFilterMenuItemContent = ( label: string, Icon: typeof MenuIcon, selected: boolean ) => (
 	<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
 		<Icon fontSize="tiny" />
 		<Typography variant="caption" sx={ { flex: 1 } }>
@@ -164,3 +191,50 @@ const renderFilterMenuItemContent = ( label: string, Icon: typeof ListIcon, sele
 		{ selected ? <CheckIcon fontSize="tiny" aria-hidden="true" /> : null }
 	</Stack>
 );
+
+function getFilterEntries(): FilterEntry[] {
+	const filter = window.elementorCommon?.config?.fontAwesome?.v7?.filter;
+
+	if ( ! Array.isArray( filter ) ) {
+		return [ ...DEFAULT_FILTER ];
+	}
+
+	const entries = filter.map( parseFilterEntry ).filter( ( entry ): entry is FilterEntry => entry !== null );
+
+	return entries.length > 0 ? entries : [ ...DEFAULT_FILTER ];
+}
+
+function parseFilterEntry( value: unknown ): FilterEntry | null {
+	if ( ! value || typeof value !== 'object' ) {
+		return null;
+	}
+
+	const entry = value as { type?: unknown; label?: unknown; value?: unknown; icon?: unknown };
+
+	if ( typeof entry.label !== 'string' || entry.label === '' ) {
+		return null;
+	}
+
+	if ( entry.type === FILTER_TYPE_GROUP ) {
+		return { type: FILTER_TYPE_GROUP, label: entry.label };
+	}
+
+	if ( entry.type === FILTER_TYPE_ALL ) {
+		return {
+			type: FILTER_TYPE_ALL,
+			label: entry.label,
+			icon: typeof entry.icon === 'string' ? entry.icon : undefined,
+		};
+	}
+
+	if ( entry.type === FILTER_TYPE_ITEM && typeof entry.value === 'string' && entry.value !== '' ) {
+		return {
+			type: FILTER_TYPE_ITEM,
+			value: entry.value,
+			label: entry.label,
+			icon: typeof entry.icon === 'string' ? entry.icon : undefined,
+		};
+	}
+
+	return null;
+}

package/src/controls/icon-library/icon-library-grid.tsx

@@ -13,8 +13,9 @@ export const ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1000;
 
 const ICON_GLYPH_SIZE = 20;
 const GRID_OVERSCAN = 6;
-const GRID_COLUMN_GAP = 1;
-const GRID_HORIZONTAL_PADDING = 1;
+const GRID_CELL_GAP = 1;
+const GRID_HORIZONTAL_PADDING = 2;
+const GRID_VERTICAL_PADDING = 1.5;
 const HOME_END_KEYS = new Set( [ 'Home', 'End' ] );
 
 const getGridMetrics = ( containerWidth: number, columnGap: number, inlinePadding: number ) => {
@@ -67,10 +68,15 @@ export const IconLibraryGrid = ( {
 	const [ focusedIndex, setFocusedIndex ] = useState( selectedIndex >= 0 ? selectedIndex : 0 );
 	const [ { columnCount, cellSize }, setGridMetrics ] = useState( () => getGridMetrics( 0, 0, 0 ) );
 	const rowCount = Math.ceil( items.length / columnCount );
+	const cellGap = Number.parseFloat( theme.spacing( GRID_CELL_GAP ) );
+	const verticalPadding = Number.parseFloat( theme.spacing( GRID_VERTICAL_PADDING ) );
 	const virtualizer = useVirtualizer( {
 		count: rowCount,
 		getScrollElement: () => containerRef.current,
 		estimateSize: () => cellSize,
+		gap: cellGap,
+		paddingStart: verticalPadding,
+		paddingEnd: verticalPadding,
 		overscan: GRID_OVERSCAN,
 	} );
 	const focusedItem = items[ focusedIndex ];
@@ -90,10 +96,11 @@ export const IconLibraryGrid = ( {
 		} );
 
 		if ( selectedIndex >= 0 ) {
-			virtualizer.scrollToIndex( Math.floor( selectedIndex / columnCount ) );
+			virtualizer.measure();
+			virtualizer.scrollToIndex( Math.floor( selectedIndex / columnCount ), { align: 'center' } );
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ columnCount, items, selectedIndex, selectedValue ] );
+	}, [ cellSize, columnCount, items, selectedIndex, selectedValue ] );
 
 	useLayoutEffect( () => {
 		if ( ! shouldRestoreFocusRef.current || ! focusedItem ) {
@@ -118,9 +125,8 @@ export const IconLibraryGrid = ( {
 		}
 
 		const measureGrid = () => {
-			const columnGap = Number.parseFloat( theme.spacing( GRID_COLUMN_GAP ) );
 			const inlinePadding = Number.parseFloat( theme.spacing( GRID_HORIZONTAL_PADDING ) ) * 2;
-			setGridMetrics( getGridMetrics( container.clientWidth, columnGap, inlinePadding ) );
+			setGridMetrics( getGridMetrics( container.clientWidth, cellGap, inlinePadding ) );
 		};
 
 		measureGrid();
@@ -130,7 +136,7 @@ export const IconLibraryGrid = ( {
 		return () => {
 			resizeObserver.disconnect();
 		};
-	}, [ theme, items.length ] );
+	}, [ theme, cellGap, items.length ] );
 
 	useLayoutEffect( () => {
 		virtualizer.measure();
@@ -242,7 +248,7 @@ export const IconLibraryGrid = ( {
 									transform: `translateY(${ virtualRow.start }px)`,
 									display: 'grid',
 									gridTemplateColumns: `repeat(${ columnCount }, minmax(0, 1fr))`,
-									gap: GRID_COLUMN_GAP,
+									gap: GRID_CELL_GAP,
 									px: GRID_HORIZONTAL_PADDING,
 									boxSizing: 'border-box',
 								} }
@@ -322,13 +328,11 @@ export const IconLibraryGrid = ( {
 															},
 													} }
 												>
-													{ item.paths.length > 0 ? (
-														<FontAwesomeGlyph
-															icon={ item }
-															size={ ICON_GLYPH_SIZE }
-															color="currentColor"
-														/>
-													) : null }
+													<FontAwesomeGlyph
+														icon={ item }
+														size={ ICON_GLYPH_SIZE }
+														color="currentColor"
+													/>
 												</Box>
 											</Tooltip>
 										</Box>

package/src/controls/icon-library/icon-library-popover.tsx

@@ -8,12 +8,13 @@ import {
 	StyledMenuList,
 	type VirtualizedItem,
 } from '@elementor/editor-ui';
-import { ComponentsIcon } from '@elementor/icons';
+import { LibraryIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
 import { Box, CircularProgress, Divider, Link, Stack, styled, Typography } from '@elementor/ui';
 import { useDebounceState } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
+import { useCustomIconLibraries } from './custom-icon-libraries';
 import {
 	createIconSelectionValue,
 	filterFontAwesome7Icons,
@@ -25,25 +26,30 @@ import { FontAwesomeGlyph } from './font-awesome-glyph';
 import { IconLibraryFilter } from './icon-library-filter';
 import { IconLibraryGrid } from './icon-library-grid';
 import { type IconLibraryView, IconLibraryViewToggle } from './icon-library-view-toggle';
+import { SvgElementIcon } from './svg-element-icon';
 import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
 
 export const ICON_LIBRARY_POPOVER_WIDTH = 300;
-export const ICON_LIBRARY_ROW_HEIGHT = 48;
 export const ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
 export const ICON_LIBRARY_VIEW_STORAGE_KEY = 'icon-library-view';
 export const ICON_LIBRARY_VIEW_STORAGE_PREFIX = 'editor-controls';
-const DEFAULT_ICON_LIBRARY_VIEW: IconLibraryView = 'list';
+const DEFAULT_ICON_LIBRARY_VIEW: IconLibraryView = 'grid';
 
 const isIconLibraryView = ( value: unknown ): value is IconLibraryView => {
 	return value === 'grid' || value === 'list';
 };
 const ICON_TILE_SIZE = 40;
+const ICON_LIBRARY_ROW_VERTICAL_PADDING = 0.5;
+const ICON_LIBRARY_ROW_VERTICAL_PADDING_PX = 4;
+export const ICON_LIBRARY_ROW_HEIGHT = ICON_TILE_SIZE + ICON_LIBRARY_ROW_VERTICAL_PADDING_PX * 2;
 const ICON_GLYPH_SIZE = 20;
-const ICON_LIBRARY_INLINE_SPACING = 1;
+const ICON_LIBRARY_INLINE_SPACING = 2;
+const ICON_LIBRARY_SEARCH_PADDING_BOTTOM = 2;
+const ICON_LIBRARY_TITLE_SIZE = '14px';
 
 const CompactIconLibraryMenuList = styled( StyledMenuList )( ( { theme } ) => ( {
 	'& > [role="option"]': {
-		padding: theme.spacing( 0.75, ICON_LIBRARY_INLINE_SPACING ),
+		padding: theme.spacing( ICON_LIBRARY_ROW_VERTICAL_PADDING, ICON_LIBRARY_INLINE_SPACING ),
 	},
 } ) );
 
@@ -78,7 +84,10 @@ export const IconLibraryPopover = ( {
 		ICON_LIBRARY_VIEW_STORAGE_PREFIX
 	);
 	const view = isIconLibraryView( storedView ) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
-	const { data: icons = [], isLoading } = useFontAwesome7Catalog( open );
+	const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog( open );
+	const { data: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries( open );
+	const isLoading = isFontAwesomeLoading || isCustomLoading;
+	const icons = useMemo( () => [ ...fontAwesomeIcons, ...customIcons ], [ customIcons, fontAwesomeIcons ] );
 
 	const items = useMemo(
 		() => createIconLibraryItems( icons, searchValue, activeLibraries ),
@@ -103,7 +112,7 @@ export const IconLibraryPopover = ( {
 		}
 
 		onSelect( {
-			value: createIconSelectionValue( icon.library, icon.name ),
+			value: icon.glyphClass ?? createIconSelectionValue( icon.library, icon.name ),
 			library: icon.library,
 		} );
 	};
@@ -117,11 +126,20 @@ export const IconLibraryPopover = ( {
 			<PopoverHeader
 				title={ __( 'Icon library', 'elementor' ) }
 				onClose={ handleClose }
-				icon={ <ComponentsIcon fontSize="tiny" /> }
+				icon={ <LibraryIcon fontSize="tiny" /> }
 				actions={ [ <IconLibraryViewToggle key="view" value={ view } onChange={ setStoredView } /> ] }
-				sx={ { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 } }
+				sx={ {
+					pl: ICON_LIBRARY_INLINE_SPACING,
+					pr: 1,
+					'& .MuiTypography-subtitle2': { fontSize: ICON_LIBRARY_TITLE_SIZE },
+				} }
 			/>
-			<Stack direction="row" alignItems="center" gap={ 1 } sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }>
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={ 1 }
+				sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM } }
+			>
 				<SearchField
 					value={ searchInputValue }
 					onSearch={ handleSearchChange }
@@ -254,9 +272,7 @@ const IconLibraryRow = ( item: VirtualizedItem< string, string > ) => {
 					flexShrink: 0,
 				} }
 			>
-				{ icon.paths.length > 0 ? (
-					<FontAwesomeGlyph icon={ icon } size={ ICON_GLYPH_SIZE } color="currentColor" />
-				) : null }
+				<FontAwesomeGlyph icon={ icon } size={ ICON_GLYPH_SIZE } color="currentColor" />
 			</Box>
 			<Typography variant="caption" color="text.primary" noWrap>
 				{ icon.label }
@@ -267,7 +283,7 @@ const IconLibraryRow = ( item: VirtualizedItem< string, string > ) => {
 
 const CatalogUnavailable = () => (
 	<Stack alignItems="center" justifyContent="center" height="100%" p={ 2.5 } gap={ 1.5 }>
-		<ComponentsIcon fontSize="large" />
+		<SvgElementIcon fontSize="large" />
 		<Typography align="center" variant="subtitle2" color="text.secondary">
 			{ __( "Icons couldn't be loaded.", 'elementor' ) }
 		</Typography>
@@ -276,7 +292,7 @@ const CatalogUnavailable = () => (
 
 const NoResults = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => (
 	<Stack alignItems="center" justifyContent="center" height="100%" p={ 2.5 } gap={ 1.5 }>
-		<ComponentsIcon fontSize="large" />
+		<SvgElementIcon fontSize="large" />
 		<Typography align="center" variant="subtitle2" color="text.secondary">
 			{ __( 'Sorry, nothing matched', 'elementor' ) }
 		</Typography>

package/src/controls/icon-library/icon-library-view-toggle.tsx

@@ -1,24 +1,13 @@
 import * as React from 'react';
-import { useId } from 'react';
-import { CheckIcon, ListIcon, WidgetsIcon } from '@elementor/icons';
-import {
-	bindMenu,
-	bindToggle,
-	Menu,
-	MenuItem,
-	Stack,
-	ToggleButton,
-	Tooltip,
-	Typography,
-	usePopupState,
-} from '@elementor/ui';
+import { ListIcon, WidgetsIcon } from '@elementor/icons';
+import { IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY } from './icon-library-tooltip';
 
 export type IconLibraryView = 'grid' | 'list';
 
-const VIEW_MENU_WIDTH = 122;
+const HEADER_ACTION_GAP = 0.5;
 
 type IconLibraryViewToggleProps = {
 	value: IconLibraryView;
@@ -26,79 +15,30 @@ type IconLibraryViewToggleProps = {
 };
 
 export const IconLibraryViewToggle = ( { value, onChange }: IconLibraryViewToggleProps ) => {
-	const popupId = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId,
-	} );
 	const isGrid = value === 'grid';
+	const nextView: IconLibraryView = isGrid ? 'list' : 'grid';
 	const ViewIcon = isGrid ? WidgetsIcon : ListIcon;
 	const viewButtonLabel = isGrid ? __( 'Grid view', 'elementor' ) : __( 'List view', 'elementor' );
+	const viewButtonAction = isGrid
+		? __( 'Switch to list view', 'elementor' )
+		: __( 'Switch to grid view', 'elementor' );
 
 	return (
-		<>
-			<Tooltip
-				title={ viewButtonLabel }
-				placement="top"
-				enterDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
-				enterNextDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
-				disableInteractive
+		<Tooltip
+			title={ viewButtonLabel }
+			placement="top"
+			enterDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+			enterNextDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+			disableInteractive
+		>
+			<IconButton
+				aria-label={ viewButtonAction }
+				size="tiny"
+				onClick={ () => onChange( nextView ) }
+				sx={ { flexShrink: 0, mr: HEADER_ACTION_GAP } }
 			>
-				<ToggleButton
-					aria-label={ viewButtonLabel }
-					value="view"
-					size="tiny"
-					selected={ popupState.isOpen }
-					sx={ { flexShrink: 0 } }
-					{ ...bindToggle( popupState ) }
-					aria-expanded={ popupState.isOpen }
-				>
-					<ViewIcon fontSize="tiny" />
-				</ToggleButton>
-			</Tooltip>
-			<Menu
-				{ ...bindMenu( popupState ) }
-				MenuListProps={ {
-					dense: true,
-					autoFocusItem: true,
-					'aria-label': __( 'View', 'elementor' ),
-				} }
-				sx={ { '& .MuiPaper-root': { minWidth: VIEW_MENU_WIDTH } } }
-			>
-				<ViewMenuItem
-					label={ __( 'List', 'elementor' ) }
-					selected={ value === 'list' }
-					onClick={ () => {
-						onChange( 'list' );
-						popupState.close();
-					} }
-				/>
-				<ViewMenuItem
-					label={ __( 'Grid', 'elementor' ) }
-					selected={ value === 'grid' }
-					onClick={ () => {
-						onChange( 'grid' );
-						popupState.close();
-					} }
-				/>
-			</Menu>
-		</>
+				<ViewIcon fontSize="tiny" />
+			</IconButton>
+		</Tooltip>
 	);
 };
-
-type ViewMenuItemProps = {
-	label: string;
-	selected: boolean;
-	onClick: () => void;
-};
-
-const ViewMenuItem = ( { label, selected, onClick }: ViewMenuItemProps ) => (
-	<MenuItem role="menuitemradio" aria-checked={ selected } selected={ selected } onClick={ onClick }>
-		<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
-			<Typography variant="caption" sx={ { flex: 1 } }>
-				{ label }
-			</Typography>
-			{ selected ? <CheckIcon fontSize="tiny" aria-hidden="true" /> : null }
-		</Stack>
-	</MenuItem>
-);

package/src/controls/icon-library/sanitize-icon-svg-markup.ts

@@ -0,0 +1,53 @@
+const ALLOWED_SVG_TAGS = new Set( [ 'svg', 'g', 'path', 'title', 'desc' ] );
+const ALLOWED_SVG_ATTRS = new Set( [
+	'd',
+	'fill',
+	'viewbox',
+	'xmlns',
+	'width',
+	'height',
+	'transform',
+	'overflow',
+	'aria-hidden',
+	'aria-label',
+	'role',
+] );
+
+export function sanitizeIconSvgMarkup( markup: unknown ): string {
+	if ( typeof markup !== 'string' || markup === '' ) {
+		return '';
+	}
+
+	const doc = new DOMParser().parseFromString( markup, 'image/svg+xml' );
+
+	if ( doc.querySelector( 'parsererror' ) ) {
+		return '';
+	}
+
+	const svg = doc.querySelector( 'svg' );
+
+	if ( ! svg ) {
+		return '';
+	}
+
+	pruneNode( svg );
+
+	return svg.tagName.toLowerCase() === 'svg' ? svg.outerHTML : '';
+}
+
+function pruneNode( node: Element ): void {
+	[ ...node.children ].forEach( ( child ) => {
+		if ( ! ALLOWED_SVG_TAGS.has( child.tagName.toLowerCase() ) ) {
+			child.remove();
+			return;
+		}
+
+		pruneNode( child );
+	} );
+
+	[ ...node.attributes ].forEach( ( attribute ) => {
+		if ( ! ALLOWED_SVG_ATTRS.has( attribute.name.toLowerCase() ) ) {
+			node.removeAttribute( attribute.name );
+		}
+	} );
+}

package/src/controls/icon-library/svg-element-icon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SvgIcon } from '@elementor/ui';
+
+const SVG_ELEMENT_ICON_PATH =
+	'M502 772c10 0 19-6 24-14l201-351c4-9 4-19 0-27-5-9-14-14-24-14h-401c-10 0-19 5-24 14-4 8-5 18 0 27l201 351c5 8 14 14 23 14z m0-82l-154-270h309l-154 270z m-323-471c-6 0-12-2-16-7-4-4-7-10-7-16v-201c0-6 3-12 7-16 4-5 10-7 16-7h201c6 0 12 2 16 7 5 4 7 10 7 16v201c0 6-2 12-7 16-4 5-10 7-16 7h-201z m-54 32c14 14 34 22 54 22h201c20 0 40-8 55-22 14-15 22-35 22-55v-201c0-20-8-40-22-54-15-15-35-23-55-23h-201c-20 0-40 8-54 23-15 14-23 34-23 54v201c0 20 8 40 23 55z m480-30c34 33 79 52 126 52s92-19 125-52c34-33 52-78 52-125s-18-93-52-126c-33-33-78-52-125-52s-92 19-126 52c-33 33-52 78-52 126s19 92 52 125z m126-2c-33 0-64-13-87-36-24-23-37-55-37-87s13-65 37-88c23-23 54-36 87-36s64 13 87 36c23 23 36 55 36 88s-13 64-36 87c-23 23-54 36-87 36z';
+
+export const SvgElementIcon = React.forwardRef< SVGSVGElement, React.ComponentProps< typeof SvgIcon > >(
+	( props, ref ) => (
+		<SvgIcon viewBox="0 0 1000 1000" { ...props } ref={ ref }>
+			<g transform="translate(0, 850) scale(1, -1)">
+				<path d={ SVG_ELEMENT_ICON_PATH } />
+			</g>
+		</SvgIcon>
+	)
+);