@progress/kendo-themes-html 14.0.0-dev.5 → 14.0.0-dev.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "14.0.0-dev.5",
+  "version": "14.0.0-dev.7",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,7 +49,7 @@
     "prepublishOnly": "npm run build && npm run typegen"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "^4.8.0"
+    "@progress/kendo-svg-icons": "4.9.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -62,5 +62,5 @@
     "react-dom": "^19.0.0",
     "vitest": "^4.0.18"
   },
-  "gitHead": "e4940bedb197a2fd5923e82978532f175982b08a"
+  "gitHead": "0e45bfaa59a5e51c96cdd46b78d35db59103aef4"
 }

package/src/_preview/tests/preview-components.tsx

@@ -298,8 +298,8 @@ export default () => (
             <DrawerItem icon="bell" text="Notification" />
             <DrawerItem icon="star" text="Favourites" />
             <DrawerItem icon="calendar" text="Calendar" />
-            <DrawerItem text="Selected" selected icon="star-outline" />
-            <DrawerItem text="Hover" hover icon="star-outline" />
+            <DrawerItem text="Selected" selected icon="star" />
+            <DrawerItem text="Hover" hover icon="star" />
           </>
         }
       >

package/src/_preview/tests/preview-elevations.tsx

@@ -1,4 +1,4 @@
-const elevationLevels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const elevationLevels = [0, 1, 2, 3, 4, 5 ];
 
 const style = `
     #test-area {
@@ -8,7 +8,7 @@ const style = `
 
     .elevation-grid {
         display: grid;
-        grid-template-columns: repeat(5, 1fr);
+        grid-template-columns: repeat(6, 1fr);
         gap: 24px;
     }
 
@@ -38,7 +38,7 @@ const SurfaceCard = ({ level }: { level: number }) => (
     }}
   >
     <div className="k-font-size-xl k-font-bold">{level}</div>
-    <div>{level !== 0 ? `Elevation` : `Default Color`}</div>
+    <div>{level !== 0 ? `Elevation` : `No Elevation`}</div>
   </div>
 );
 

package/src/chat/chat-message.tsx

@@ -17,8 +17,8 @@ const options = {};
 
 const defaultToolbarItems = [
     <Button icon="copy" fillMode="flat" aria-label="Copy"></Button>,
-    <Button icon="arrow-rotate-cw-outline" fillMode="flat" aria-label="Retry"></Button>,
-    <Button icon="download-light" fillMode="flat" aria-label="Download"></Button>,
+    <Button icon="arrow-rotate-cw" fillMode="flat" aria-label="Retry"></Button>,
+    <Button icon="download" fillMode="flat" aria-label="Download"></Button>,
 ];
 
 const defaultOptions = {
@@ -86,7 +86,7 @@ export const ChatMessage = (
                     'k-message-failed':  failed
                 }
             )}>
-            { failed && <IconButton className="k-resend-button" icon="arrow-rotate-cw-outline" size="xsmall" fillMode="clear" aria-label="Resend" />}
+            { failed && <IconButton className="k-resend-button" icon="arrow-rotate-cw" size="xsmall" fillMode="clear" aria-label="Resend" />}
             <ChatBubble
                 typing={typing}
                 selected={selected}

package/src/chat/chat.spec.tsx

@@ -27,7 +27,7 @@ export type KendoChatProps = {
 }
 
 const defaultTools = <>
-    <IconButton key="paperclip" icon="paperclip-outline-alt-right" fillMode="clear" rounded="full" size="small" aria-label="Attach file" />
+    <IconButton key="paperclip" icon="paperclip" fillMode="clear" rounded="full" size="small" aria-label="Attach file" />
     <div className="k-spacer"></div>
 </>;
 
@@ -72,7 +72,7 @@ export const Chat: KendoComponent<KendoChatProps & React.HTMLAttributes<HTMLDivE
                     {props.children}
                 </div>
                 {scrollToBottom && <div className="k-chat-scroll-to-bottom-container">
-                        <IconFloatingActionButton themeColor="base" icon="arrow-down-outline" size="small" />
+                        <IconFloatingActionButton themeColor="base" icon="arrow-down" size="small" />
                     </div>}
             </div>
             {scrollbar && <div className="k-separator"></div>}

package/src/chat/tests/chat-files-layout.tsx

@@ -34,7 +34,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -46,7 +46,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -68,7 +68,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -80,7 +80,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -105,7 +105,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -117,7 +117,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -138,7 +138,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -150,7 +150,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />

package/src/chat/tests/chat-files-pin.tsx

@@ -83,7 +83,7 @@ export default () => (
 
             <Popup className="k-menu-popup receiver">
                 <ContextMenu>
-                    <MenuListItem first text="Download" icon="download-light"></MenuListItem>
+                    <MenuListItem first text="Download" icon="download"></MenuListItem>
                     <MenuListItem text="Pin" icon="pin-outline" selected></MenuListItem>
                 </ContextMenu>
             </Popup>
@@ -139,7 +139,7 @@ export default () => (
 
             <Popup className="k-menu-popup sender">
                 <ContextMenu>
-                    <MenuListItem first text="Download" icon="download-light"></MenuListItem>
+                    <MenuListItem first text="Download" icon="download"></MenuListItem>
                     <MenuListItem text="Pin" icon="pin-outline" selected></MenuListItem>
                     <MenuListItem last text="Delete" icon="trash"></MenuListItem>
                 </ContextMenu>

package/src/chat/tests/chat-files.tsx

@@ -37,7 +37,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -55,7 +55,7 @@ export default () =>(
                                     <FileBox icon="file-psd" name="File with long name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -80,7 +80,7 @@ export default () =>(
                                     <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -98,7 +98,7 @@ export default () =>(
                                     <FileBox icon="file-psd" name="File with long name" size="5MB" />
                                 </FileBoxWrapper>
                                 <div className="k-chat-download-button-wrapper">
-                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                    <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                                 </div>
                             </>
                         } />
@@ -127,7 +127,7 @@ export default () =>(
                                 <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                             </FileBoxWrapper>
                             <div className="k-chat-download-button-wrapper">
-                                <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                             </div>
                             </>
                         } />
@@ -152,7 +152,7 @@ export default () =>(
                                 <FileBox icon="file-csv" name="Another file with even longer name" size="5MB" />
                             </FileBoxWrapper>
                             <div className="k-chat-download-button-wrapper">
-                                <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download-light" size="small" />
+                                <IconTextButton className="k-chat-download-button" fillMode="flat" children="Download all" icon="download" size="small" />
                             </div>
                             </>
                         } />

package/src/chat/tests/chat-message-toolbar.tsx

@@ -31,9 +31,9 @@ export default () =>(
                         <ChatMessage toolbar toolbarItems={[
                             <Button icon="copy" fillMode="flat" size="xsmall"></Button>,
                             <Button icon="arrows-rotate-outline" fillMode="flat" size="xsmall"></Button>,
-                            <Button icon="download-light" fillMode="flat" size="xsmall"></Button>,
+                            <Button icon="download" fillMode="flat" size="xsmall"></Button>,
                             <ToolbarSeparator></ToolbarSeparator>,
-                            <Button icon="thumb-up-outline" fillMode="flat" size="xsmall"></Button>,
+                            <Button icon="thumb-up" fillMode="flat" size="xsmall"></Button>,
                         ]} selected text="(Selected) Message with toolbar" />
                     </ChatMessageGroup>
                 </ChatMessageToolbar>

package/src/drawer/tests/drawer-item-states.tsx

@@ -13,10 +13,10 @@ export default () =>(
             <DrawerNormal items={
                 <>
                     {[ 'normal', ...DrawerItem.states ].map((state) => (
-                        <DrawerItem text={`Item state: ${state}`} {...{ [state]: true }} icon="star-outline" />
+                        <DrawerItem text={`Item state: ${state}`} {...{ [state]: true }} icon="star" />
                     ))}
-                    <DrawerItem text="Item state: selected + hover" selected hover icon="star-outline" />
-                    <DrawerItem text="Item state: selected + focus" selected focus icon="star-outline" />
+                    <DrawerItem text="Item state: selected + hover" selected hover icon="star" />
+                    <DrawerItem text="Item state: selected + focus" selected focus icon="star" />
                 </>
             }>
             </DrawerNormal>

package/src/editor/demos/editor.tsx

@@ -43,7 +43,7 @@ export const EditorDemo = (props: KendoEditorProps & { variant?: (typeof variant
                 </ButtonGroup>,
                 <ButtonGroup>
                     <Button icon="subscript"></Button>
-                    <Button icon="supscript"></Button>
+                    <Button icon="superscript"></Button>
                 </ButtonGroup>,
                 <ButtonGroup>
                     <Button icon="align-left"></Button>

package/src/editor/templates/editor-normal.tsx

@@ -17,7 +17,7 @@ export const EditorNormal = (props) => (
             </ButtonGroup>,
             <ButtonGroup key="script">
                 <Button className="k-group-start" icon="subscript" aria-label="Subscript"></Button>
-                <Button className="k-group-end" icon="supscript" aria-label="Superscript"></Button>
+                <Button className="k-group-end" icon="superscript" aria-label="Superscript"></Button>
             </ButtonGroup>,
             <ButtonGroup key="indent">
                 <Button className="k-group-start" icon="indent" aria-label="Indent"></Button>

package/src/editor/templates/editor-resizable.tsx

@@ -18,7 +18,7 @@ export const EditorResizable = (props) => (
             </ButtonGroup>,
             <ButtonGroup key="script">
                 <Button className="k-group-start" icon="subscript" aria-label="Subscript"></Button>
-                <Button className="k-group-end" icon="supscript" aria-label="Superscript"></Button>
+                <Button className="k-group-end" icon="superscript" aria-label="Superscript"></Button>
             </ButtonGroup>,
             <ButtonGroup key="indent">
                 <Button className="k-group-start" icon="indent" aria-label="Indent"></Button>

package/src/editor/templates/editor-responsive-toolbar.tsx

@@ -19,7 +19,7 @@ export const EditorResponsiveToolbar = (props) => (
             </ButtonGroup>,
             <ButtonGroup key="script">
                 <Button className="k-group-start" icon="subscript" aria-label="Subscript"></Button>
-                <Button className="k-group-end" icon="supscript" aria-label="Superscript"></Button>
+                <Button className="k-group-end" icon="superscript" aria-label="Superscript"></Button>
             </ButtonGroup>,
             <ButtonGroup key="indent">
                 <Button className="k-group-start" icon="indent" aria-label="Indent"></Button>

package/src/editor/tests/editor-table-wizard.tsx

@@ -238,7 +238,7 @@ export default () =>(
                         <FormField
                             colSpan="2"
                             label="Text control"
-                            editor={ <DropdownList prefix={ <Icon icon="text-wrap" /> } placeholder="Wrap" /> }
+                            editor={ <DropdownList prefix={ <Icon icon="text-wrap-arrow" /> } placeholder="Wrap" /> }
                         />
                         <FormField
                             colSpan="2"

package/src/editor/tests/editor.tsx

@@ -78,7 +78,7 @@ export default () =>(
                         </ButtonGroup>,
                         <ButtonGroup>
                             <Button className="k-group-start" icon="subscript"></Button>
-                            <Button className="k-group-end" icon="supscript"></Button>
+                            <Button className="k-group-end" icon="superscript"></Button>
                         </ButtonGroup>,
                         <ButtonGroup>
                             <Button className="k-group-start" icon="align-left"></Button>
@@ -153,7 +153,7 @@ export default () =>(
                         </ButtonGroup>,
                         <ButtonGroup disabled>
                             <Button icon="subscript" disabled></Button>
-                            <Button className="k-group-end" icon="supscript" disabled></Button>
+                            <Button className="k-group-end" icon="superscript" disabled></Button>
                         </ButtonGroup>,
                         <ButtonGroup disabled>
                             <Button className="k-group-start" icon="align-left" disabled></Button>

package/src/grid/tests/grid-assistant-window.tsx

@@ -198,8 +198,8 @@ export default () => (
                                             <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
                                             <IconTextButton fillMode="flat" icon="arrow-rotate-cw">Retry</IconTextButton>
                                             <span className="k-spacer"></span>
-                                            <IconButton fillMode="flat" icon="thumb-up-outline"></IconButton>
-                                            <IconButton fillMode="flat" icon="thumb-down-outline"></IconButton>
+                                            <IconButton fillMode="flat" icon="thumb-up"></IconButton>
+                                            <IconButton fillMode="flat" icon="thumb-down"></IconButton>
                                         </ActionButtons>
                                     </Card>
                                 </div>
@@ -231,8 +231,8 @@ export default () => (
                                             <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
                                             <IconTextButton fillMode="flat" icon="arrow-rotate-cw">Retry</IconTextButton>
                                             <span className="k-spacer"></span>
-                                            <IconButton fillMode="flat" icon="thumb-up-outline"></IconButton>
-                                            <IconButton fillMode="flat" icon="thumb-down-outline"></IconButton>
+                                            <IconButton fillMode="flat" icon="thumb-up"></IconButton>
+                                            <IconButton fillMode="flat" icon="thumb-down"></IconButton>
                                         </ActionButtons>
                                     </Card>
                                 </div>

package/src/grid/tests/grid-row-pinning-adaptive.tsx

@@ -159,7 +159,7 @@ export default () => (
           header={<ActionSheetHeader actionsEnd={<Button icon="check" size="large" fillMode="flat" />} title="Row Content Menu" />}
           footer={
             <ActionSheetFooter>
-              <Button icon="cancel-outline" size="large">
+              <Button icon="cancel" size="large">
                 Cancel
               </Button>
               <Button icon="check" size="large" themeColor="primary" disabled>

package/src/grid/tests/grid-semantic-search-popup.tsx

@@ -37,8 +37,8 @@ export default () =>(
                     }
                     suffix={
                         <>
-                            <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" />
-                            <IconButton icon="arrow-up-outline" rounded="full" size="small" disabled />
+                            <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" />
+                            <IconButton icon="arrow-up" rounded="full" size="small" disabled />
                         </>
                     }
                     popup={
@@ -76,8 +76,8 @@ export default () =>(
                     }
                     suffix={
                         <>
-                            <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" />
-                            <IconButton icon="arrow-up-outline" rounded="full" size="small" disabled />
+                            <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" />
+                            <IconButton icon="arrow-up" rounded="full" size="small" disabled />
                         </>
                     }
                     popup={
@@ -115,8 +115,8 @@ export default () =>(
                     }
                     suffix={
                         <>
-                            <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" />
-                            <IconButton icon="arrow-up-outline" rounded="full" size="small" disabled />
+                            <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" />
+                            <IconButton icon="arrow-up" rounded="full" size="small" disabled />
                         </>
                     }
                     popup={
@@ -130,7 +130,7 @@ export default () =>(
                             <List>
                                 <ListContent grouping>
                                     <ListUl>
-                                        <ListGroupItem groupIconName="lightbulb-outline">Suggested prompts</ListGroupItem>
+                                        <ListGroupItem groupIconName="lightbulb">Suggested prompts</ListGroupItem>
                                         <ListItem>Filter by account type</ListItem>
                                         <ListItem>Show only failed transactions</ListItem>
                                         <ListItem>Hide Currency column</ListItem>
@@ -162,8 +162,8 @@ export default () =>(
                     }
                     suffix={
                         <>
-                            <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" />
-                            <IconButton icon="arrow-up-outline" rounded="full" size="small" disabled />
+                            <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" />
+                            <IconButton icon="arrow-up" rounded="full" size="small" disabled />
                         </>
                     }
                     popup={
@@ -175,7 +175,7 @@ export default () =>(
                             </>
                         } />
                         <NoData className="k-smart-box-no-data">
-                            <Icon icon="file-clock-outline" size={"xxxlarge"} />
+                            <Icon icon="file-clock" size={"xxxlarge"} />
                             <span>No previous searches</span>
                         </NoData>
                     </>} />

package/src/grid/tests/grid-toolbar.tsx

@@ -165,8 +165,8 @@ export default () =>(
                             }
                             suffix={
                                         <>
-                                            <IconButton icon="microphone-outline" fillMode="clear" rounded="full" size="small" />
-                                            <IconButton icon="arrow-up-outline" rounded="full" size="small" disabled />
+                                            <IconButton icon="microphone" fillMode="clear" rounded="full" size="small" />
+                                            <IconButton icon="arrow-up" rounded="full" size="small" disabled />
                                         </>
                                     }
                             placeholder="Sort, filter or group with AI" />

package/src/imageeditor/templates/imageeditor-crop.tsx

@@ -28,7 +28,7 @@ export const ImageEditorCrop = (props: any) => (
             <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                 <>
                     <Button themeColor="primary" icon="check">Confirm</Button>
-                    <Button icon="cancel-outline">Cancel</Button>
+                    <Button icon="cancel">Cancel</Button>
                 </>
             }>
                 <Fieldset layout="grid" legend="Crop Image" cols={2} gutters={{cols: "8px"}}>

package/src/imageeditor/templates/imageeditor-resize.tsx

@@ -27,7 +27,7 @@ export const ImageEditorResize = (props: any) => (
             <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                 <>
                     <Button themeColor="primary" icon="check">Confirm</Button>
-                    <Button icon="cancel-outline">Cancel</Button>
+                    <Button icon="cancel">Cancel</Button>
                 </>
             }>
                 <Fieldset layout="grid" legend="Resize Image" cols={2} gutters={{cols: "8px"}}>

package/src/prompt/demos/prompt.tsx

@@ -201,12 +201,12 @@ export const PromptDemo = (
                       <IconButton
                         fillMode="flat"
                         themeColor="base"
-                        icon="thumb-up-outline"
+                        icon="thumb-up"
                       ></IconButton>
                       <IconButton
                         fillMode="flat"
                         themeColor="base"
-                        icon="thumb-down-outline"
+                        icon="thumb-down"
                       ></IconButton>
                     </ActionButtons>
                   </Card>
@@ -241,12 +241,12 @@ export const PromptDemo = (
                       <IconButton
                         fillMode="flat"
                         themeColor="base"
-                        icon="thumb-up-outline"
+                        icon="thumb-up"
                       ></IconButton>
                       <IconButton
                         fillMode="flat"
                         themeColor="base"
-                        icon="thumb-down-outline"
+                        icon="thumb-down"
                       ></IconButton>
                     </ActionButtons>
                   </Card>

package/src/prompt/templates/prompt-inline.tsx

@@ -15,7 +15,7 @@ export const PromptInline = ({ text, ...other }: any) => (
                         <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
                         <IconTextButton fillMode="flat" themeColor="primary" icon="insert-bottom">Insert</IconTextButton>
                         <IconTextButton fillMode="flat" themeColor="primary" icon="check">Replace</IconTextButton>
-                        <IconTextButton fillMode="flat" icon="cancel-outline">Discard</IconTextButton>
+                        <IconTextButton fillMode="flat" icon="cancel">Discard</IconTextButton>
                     </ActionButtons>
                 </Card>
                 <Textarea rows={1} placeholder="Edit, generate or explain ..." resize="none" flow="horizontal" suffixSeparator={false}

package/src/prompt/templates/prompt-output.tsx

@@ -29,8 +29,8 @@ export const PromptOutput = (props) => (
                             <IconTextButton fillMode="flat" icon="arrow-rotate-cw">Retry</IconTextButton>
                             <IconButton fillMode="flat" themeColor="primary" icon="more-horizontal" aria-label="More actions"></IconButton>
                             <span className="k-spacer"></span>
-                            <IconButton fillMode="flat" icon="thumb-up-outline" aria-label="Thumbs up"></IconButton>
-                            <IconButton fillMode="flat" icon="thumb-down-outline" aria-label="Thumbs down"></IconButton>
+                            <IconButton fillMode="flat" icon="thumb-up" aria-label="Thumbs up"></IconButton>
+                            <IconButton fillMode="flat" icon="thumb-down" aria-label="Thumbs down"></IconButton>
                         </ActionButtons>
                     </Card>
 
@@ -44,8 +44,8 @@ export const PromptOutput = (props) => (
                             <IconTextButton fillMode="flat" icon="arrow-rotate-cw">Retry</IconTextButton>
                             <IconButton fillMode="flat" themeColor="primary" icon="more-horizontal" aria-label="More actions"></IconButton>
                             <span className="k-spacer"></span>
-                            <IconButton fillMode="flat" icon="thumb-up-outline" aria-label="Thumbs up"></IconButton>
-                            <IconButton fillMode="flat" icon="thumb-down-outline" aria-label="Thumbs down"></IconButton>
+                            <IconButton fillMode="flat" icon="thumb-up" aria-label="Thumbs up"></IconButton>
+                            <IconButton fillMode="flat" icon="thumb-down" aria-label="Thumbs down"></IconButton>
                         </ActionButtons>
                     </Card>
                 </div>

package/src/prompt/tests/prompt-inline-response-generation.tsx

@@ -52,7 +52,7 @@ export default () =>(
                                         <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
                                         <IconTextButton fillMode="flat" themeColor="primary" icon="insert-bottom">Insert</IconTextButton>
                                         <IconTextButton fillMode="flat" themeColor="primary" icon="check">Replace</IconTextButton>
-                                        <IconTextButton fillMode="flat" icon="cancel-outline">Discard</IconTextButton>
+                                        <IconTextButton fillMode="flat" icon="cancel">Discard</IconTextButton>
                                     </ActionButtons>
                                 </Card>
                                 <Textarea rows={3} value="Here is a link to my portfolio. I'm a Full-stack developer with 10 years of experience. Would love your input for improvement." resize="none" flow="horizontal" suffixSeparator={false}
@@ -83,7 +83,7 @@ export default () =>(
                                         <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
                                         <IconTextButton fillMode="flat" themeColor="primary" icon="insert-bottom">Insert</IconTextButton>
                                         <IconTextButton fillMode="flat" themeColor="primary" icon="check">Replace</IconTextButton>
-                                        <IconTextButton fillMode="flat" icon="cancel-outline">Discard</IconTextButton>
+                                        <IconTextButton fillMode="flat" icon="cancel">Discard</IconTextButton>
                                     </ActionButtons>
                                 </Card>
                                 <Textarea rows={3} value="Here is a link to my portfolio. I'm a Full-stack developer with 10 years of experience. Would love your input for improvement." resize="none" flow="horizontal" suffixSeparator={false}

package/src/prompt-box/prompt-box.spec.tsx

@@ -105,7 +105,7 @@ export const PromptBox: KendoComponent<KendoPromptBoxProps & KendoPromptBoxState
                     {endAffix}
                     <SpeechToTextButton size="small" fillMode="flat" rounded="full"/>
                     <IconButton
-                        icon={generating ? "stop-sm" : "arrow-up-outline"}
+                        icon={generating ? "stop" : "arrow-up"}
                         size="small"
                         rounded="full"
                         active={generating}