feat(@clayui/icon-selector): LPD-46157 Add new icon-selector componen…

…t and it's imports

packages/clay-core/src/icon-selector/IconSelector.tsx

@@ -0,0 +1,63 @@
+/**
+ * SPDX-FileCopyrightText: © 2025 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import ClayButton from '@clayui/button';
+import Input from '@clayui/form/src/Input';
+import Icon from '@clayui/icon';
+import React, {useState} from 'react';
+
+import DropdownSelector from './DropdownSelector';
+
+export function IconSelector() {
+	const [selectedIcon, setSelectedIcon] = useState<string>('');
+
+	const handleIconSelect = (icon: string) => {
+		setSelectedIcon(icon);
+	};
+
+	const handleClearSelection = () => {
+		setSelectedIcon('');
+	};
+
+	return (
+		<>
+			{selectedIcon ? (
+				<div className="selected-icon-container">
+					<Input.Group stacked>
+						<ClayButton
+							aria-label={selectedIcon}
+							displayType="secondary"
+						>
+							<Icon symbol={selectedIcon} />
+						</ClayButton>
+
+						<Input
+							readOnly
+							value={
+								selectedIcon.charAt(0).toUpperCase() +
+								selectedIcon.slice(1)
+							}
+						/>
+					</Input.Group>
+
+					<DropdownSelector
+						buttonWithIcon
+						handleIconSelect={handleIconSelect}
+					/>
+
+					<ClayButton
+						aria-label="delete icon"
+						displayType="secondary"
+						onClick={handleClearSelection}
+					>
+						<Icon symbol="trash" />
+					</ClayButton>
+				</div>
+			) : (
+				<DropdownSelector handleIconSelect={handleIconSelect} />
+			)}
+		</>
+	);
+}

packages/clay-core/src/icon-selector/index.ts

@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export {IconSelector} from './IconSelector';