@progress/kendo-themes-html 6.1.1-dev.8 → 6.2.1-dev.0

package/src/listbox/tests/listbox.tsx

@@ -30,10 +30,10 @@ root.render(
             <section>
                 <ListBox>
                     <ListBoxActions>
-                        <Button icon="arrow-n"></Button>
-                        <Button icon="arrow-s"></Button>
-                        <Button icon="arrow-w"></Button>
-                        <Button icon="arrow-e"></Button>
+                        <Button icon="caret-alt-up"></Button>
+                        <Button icon="caret-alt-down"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </ListBoxActions>
                     <List>
                         <ListItem>Item</ListItem>
@@ -49,10 +49,10 @@ root.render(
             <section dir="rtl">
                 <ListBox>
                     <ListBoxActions>
-                        <Button icon="arrow-n"></Button>
-                        <Button icon="arrow-s"></Button>
-                        <Button icon="arrow-w"></Button>
-                        <Button icon="arrow-e"></Button>
+                        <Button icon="caret-alt-up"></Button>
+                        <Button icon="caret-alt-down"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </ListBoxActions>
                     <List>
                         <ListItem>Item</ListItem>
@@ -68,10 +68,10 @@ root.render(
             <section>
                 <ListBox actionsPosition="right">
                     <ListBoxActions>
-                        <Button icon="arrow-n"></Button>
-                        <Button icon="arrow-s"></Button>
-                        <Button icon="arrow-w"></Button>
-                        <Button icon="arrow-e"></Button>
+                        <Button icon="caret-alt-up"></Button>
+                        <Button icon="caret-alt-down"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </ListBoxActions>
                     <List>
                         <ListItem>Item</ListItem>
@@ -87,10 +87,10 @@ root.render(
             <section dir="rtl">
                 <ListBox actionsPosition="right">
                     <ListBoxActions>
-                        <Button icon="arrow-n"></Button>
-                        <Button icon="arrow-s"></Button>
-                        <Button icon="arrow-w"></Button>
-                        <Button icon="arrow-e"></Button>
+                        <Button icon="caret-alt-up"></Button>
+                        <Button icon="caret-alt-down"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </ListBoxActions>
                     <List>
                         <ListItem>Item</ListItem>
@@ -106,10 +106,10 @@ root.render(
             <section>
                 <ListBox actionsPosition="top">
                     <ListBoxActions>
-                        <Button icon="arrow-n"></Button>
-                        <Button icon="arrow-s"></Button>
-                        <Button icon="arrow-w"></Button>
-                        <Button icon="arrow-e"></Button>
+                        <Button icon="caret-alt-up"></Button>
+                        <Button icon="caret-alt-down"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </ListBoxActions>
                     <List>
                         <ListItem>Item</ListItem>
@@ -125,10 +125,10 @@ root.render(
             <section dir="rtl">
                 <ListBox actionsPosition="top">
                     <ListBoxActions>
-                        <Button icon="arrow-n"></Button>
-                        <Button icon="arrow-s"></Button>
-                        <Button icon="arrow-e"></Button>
-                        <Button icon="arrow-w"></Button>
+                        <Button icon="caret-alt-up"></Button>
+                        <Button icon="caret-alt-down"></Button>
+                        <Button icon="caret-alt-right"></Button>
+                        <Button icon="caret-alt-left"></Button>
                     </ListBoxActions>
                     <List>
                         <ListItem>Item</ListItem>
@@ -144,10 +144,10 @@ root.render(
             <section>
                 <ListBox actionsPosition="bottom">
                     <ListBoxActions>
-                        <Button icon="arrow-n"></Button>
-                        <Button icon="arrow-s"></Button>
-                        <Button icon="arrow-w"></Button>
-                        <Button icon="arrow-e"></Button>
+                        <Button icon="caret-alt-up"></Button>
+                        <Button icon="caret-alt-down"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </ListBoxActions>
                     <List>
                         <ListItem>Item</ListItem>
@@ -163,10 +163,10 @@ root.render(
             <section dir="rtl">
                 <ListBox actionsPosition="bottom">
                     <ListBoxActions>
-                        <Button icon="arrow-n"></Button>
-                        <Button icon="arrow-s"></Button>
-                        <Button icon="arrow-e"></Button>
-                        <Button icon="arrow-w"></Button>
+                        <Button icon="caret-alt-up"></Button>
+                        <Button icon="caret-alt-down"></Button>
+                        <Button icon="caret-alt-right"></Button>
+                        <Button icon="caret-alt-left"></Button>
                     </ListBoxActions>
                     <List>
                         <ListItem>Item</ListItem>

package/src/map/tests/map.tsx

@@ -36,10 +36,10 @@ root.render(
                 </div>
                 <div className="k-map-controls k-pos-top k-pos-left">
                     <div className="k-widget k-navigator">
-                        <Button className="k-navigator-n" icon="arrow-n" fillMode="flat" rounded="full" size={null}></Button>
-                        <Button className="k-navigator-e" icon="arrow-e" fillMode="flat" rounded="full" size={null}></Button>
-                        <Button className="k-navigator-s" icon="arrow-s" fillMode="flat" rounded="full" size={null}></Button>
-                        <Button className="k-navigator-w" icon="arrow-w" fillMode="flat" rounded="full" size={null}></Button>
+                        <Button className="k-navigator-n" icon="caret-alt-up" fillMode="flat" rounded="full" size={null}></Button>
+                        <Button className="k-navigator-e" icon="caret-alt-right" fillMode="flat" rounded="full" size={null}></Button>
+                        <Button className="k-navigator-s" icon="caret-alt-down" fillMode="flat" rounded="full" size={null}></Button>
+                        <Button className="k-navigator-w" icon="caret-alt-left" fillMode="flat" rounded="full" size={null}></Button>
                     </div>
                     <div className="k-widget k-zoom-control k-button-group k-group-horizontal">
                         <Button icon="plus" className="k-zoom-in"></Button>

package/src/menu/menu-item.tsx

@@ -59,8 +59,8 @@ export class MenuItem extends React.Component<MenuItemProps> {
 
         if ( !expandArrowName ) {
             expandArrowName = dir === 'rtl'
-                ? 'arrow-w'
-                : 'arrow-e';
+                ? 'caret-alt-left'
+                : 'caret-alt-right';
         }
 
         return (

package/src/menu/tests/menu-vertical.tsx

@@ -38,7 +38,7 @@ root.render(
                         <span className="k-link k-menu-link">
                             <span className="k-menu-link-text">Hover</span>
                             <span className="k-menu-expand-arrow">
-                                <Icon name="arrow-60-right"></Icon>
+                                <Icon name="caret-alt-right"></Icon>
                             </span>
                         </span>
                     </li>
@@ -46,7 +46,7 @@ root.render(
                         <span className="k-link k-menu-link">
                             <span className="k-menu-link-text">Active</span>
                             <span className="k-menu-expand-arrow">
-                                <Icon name="arrow-60-right"></Icon>
+                                <Icon name="caret-alt-right"></Icon>
                             </span>
                         </span>
                     </li>
@@ -60,7 +60,7 @@ root.render(
                             <Icon name="folder"></Icon>
                             <span className="k-menu-link-text">Normal with icon</span>
                             <span className="k-menu-expand-arrow">
-                                <Icon name="arrow-60-right"></Icon>
+                                <Icon name="caret-alt-right"></Icon>
                             </span>
                         </span>
                     </li>
@@ -69,7 +69,7 @@ root.render(
                             <Icon name="folder"></Icon>
                             <span className="k-menu-link-text">Hover with icon</span>
                             <span className="k-menu-expand-arrow">
-                                <Icon name="arrow-60-right"></Icon>
+                                <Icon name="caret-alt-right"></Icon>
                             </span>
                         </span>
                     </li>
@@ -78,7 +78,7 @@ root.render(
                             <Icon name="folder"></Icon>
                             <span className="k-menu-link-text">Active with icon</span>
                             <span className="k-menu-expand-arrow">
-                                <Icon name="arrow-60-right"></Icon>
+                                <Icon name="caret-alt-right"></Icon>
                             </span>
                         </span>
                     </li>
@@ -87,7 +87,7 @@ root.render(
                             <Icon name="folder"></Icon>
                             <span className="k-menu-link-text">Focus with icon</span>
                             <span className="k-menu-expand-arrow">
-                                <Icon name="arrow-60-right"></Icon>
+                                <Icon name="caret-alt-right"></Icon>
                             </span>
                         </span>
                     </li>

package/src/menu/tests/menu.tsx

@@ -40,7 +40,7 @@ root.render(
                         <span className="k-link k-menu-link">
                             <span className="k-menu-link-text">Hover</span>
                             <span className="k-menu-expand-arrow">
-                                <Icon name="arrow-s"></Icon>
+                                <Icon name="caret-alt-down"></Icon>
                             </span>
                         </span>
                     </li>
@@ -48,7 +48,7 @@ root.render(
                         <span className="k-link k-menu-link k-active">
                             <span className="k-menu-link-text">Active</span>
                             <span className="k-menu-expand-arrow">
-                                <Icon name="arrow-s"></Icon>
+                                <Icon name="caret-alt-down"></Icon>
                             </span>
                         </span>
                         <div className="k-animation-container k-animation-container-fixed k-animation-container-shown">
@@ -100,8 +100,8 @@ root.render(
                             <span className="k-link k-menu-link">Item 6</span>
                         </li>
                     </ul>
-                    <Button icon="arrow-60-left" className="k-menu-scroll-button k-scroll-left"></Button>
-                    <Button icon="arrow-60-right" className="k-menu-scroll-button k-scroll-right"></Button>
+                    <Button icon="caret-alt-left" className="k-menu-scroll-button k-scroll-left"></Button>
+                    <Button icon="caret-alt-right" className="k-menu-scroll-button k-scroll-right"></Button>
                 </div>
             </section>
         </div>

package/src/multiselect/multiselect.tsx

@@ -85,7 +85,7 @@ export class MultiSelect extends React.Component<MultiSelectProps> {
                 {showArrowButton && (
                     <Button
                         className="k-input-button"
-                        icon="arrow-s"
+                        icon="caret-alt-down"
                         rounded={null}
                         size={size}
                         fillMode={fillMode}

package/src/pivotgrid/tests/pivotgrid-jquery.tsx

@@ -47,7 +47,7 @@ root.render(
                                             </colgroup>
                                             <tbody className="k-table-tbody">
                                                 <tr className="k-table-row">
-                                                    <td className="k-table-td k-first"><Icon name="expand" /><span>All Geographies</span></td>
+                                                    <td className="k-table-td k-first"><Icon name="caret-alt-right" /><span>All Geographies</span></td>
                                                 </tr>
                                             </tbody>
                                         </table>
@@ -92,7 +92,7 @@ root.render(
                                                             <th className="k-table-th k-header" colSpan={4}>
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="collapse" />
+                                                                        <Icon name="caret-alt-down" />
                                                                         <span className="k-column-title">All Periods</span>
                                                                     </span>
                                                                 </span>
@@ -109,7 +109,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">CY 2005</span>
                                                                     </span>
                                                                 </span>
@@ -117,7 +117,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">CY 2006</span>
                                                                     </span>
                                                                 </span>
@@ -125,7 +125,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">CY 2007</span>
                                                                     </span>
                                                                 </span>
@@ -133,7 +133,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">CY 2008</span>
                                                                     </span>
                                                                 </span>
@@ -143,7 +143,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">All Products</span>
                                                                     </span>
                                                                 </span>
@@ -151,7 +151,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">All Products</span>
                                                                     </span>
                                                                 </span>
@@ -159,7 +159,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">All Products</span>
                                                                     </span>
                                                                 </span>
@@ -167,7 +167,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">All Products</span>
                                                                     </span>
                                                                 </span>
@@ -175,7 +175,7 @@ root.render(
                                                             <th className="k-table-th k-header">
                                                                 <span className="k-cell-inner">
                                                                     <span className="k-link">
-                                                                        <Icon name="expand" />
+                                                                        <Icon name="caret-alt-right" />
                                                                         <span className="k-column-title">All Products</span>
                                                                     </span>
                                                                 </span>

package/src/scheduler/tests/scheduler-angular-agenda-rtl.tsx

@@ -76,7 +76,7 @@ root.render(
                                                         <span className="k-scheduler-agendadate">Jun 2013</span>
                                                     </td>
                                                     <td className="k-scheduler-timecolumn">
-                                                        <div><Icon name="arrow-e"></Icon> all day</div>
+                                                        <div><Icon name="caret-alt-right"></Icon> all day</div>
                                                     </td>
                                                     <td>
                                                         <div className="k-task">
@@ -189,7 +189,7 @@ root.render(
                                                         <span className="k-scheduler-agendadate">Jun 2013</span>
                                                     </td>
                                                     <td className="k-scheduler-timecolumn">
-                                                        <div><Icon name="arrow-e"></Icon> all day</div>
+                                                        <div><Icon name="caret-alt-right"></Icon> all day</div>
                                                     </td>
                                                     <td>
                                                         <div className="k-task">

package/src/scheduler/tests/scheduler-angular-agenda.tsx

@@ -76,7 +76,7 @@ root.render(
                                                         <span className="k-scheduler-agendadate">Jun 2013</span>
                                                     </td>
                                                     <td className="k-scheduler-timecolumn">
-                                                        <div><Icon name="arrow-w"></Icon> all day</div>
+                                                        <div><Icon name="caret-alt-left"></Icon> all day</div>
                                                     </td>
                                                     <td>
                                                         <div className="k-task">
@@ -189,7 +189,7 @@ root.render(
                                                         <span className="k-scheduler-agendadate">Jun 2013</span>
                                                     </td>
                                                     <td className="k-scheduler-timecolumn">
-                                                        <div><Icon name="arrow-w"></Icon> all day</div>
+                                                        <div><Icon name="caret-alt-left"></Icon> all day</div>
                                                     </td>
                                                     <td>
                                                         <div className="k-task">

package/src/scheduler/tests/scheduler-angular-day-rtl.tsx

@@ -62,7 +62,7 @@ root.render(
                                             </tbody>
                                         </table>
                                         <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "454px", right: "1px", top: '0px', height: "25px" }} className="k-event">
-                                            <span className="k-event-actions"><Icon name="arrow-e"></Icon></span>
+                                            <span className="k-event-actions"><Icon name="caret-alt-right"></Icon></span>
                                             <div><div className="k-event-template">Attending HR Conference</div></div>
                                             <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
                                             <span className="k-resize-handle k-resize-w"></span>

package/src/scheduler/tests/scheduler-angular-month-rtl.tsx

@@ -244,7 +244,7 @@ root.render(
                                     <div><div className="k-event-template">Grand Canyon tour</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "325px", right: '0px', top: "220px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="arrow-e"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="caret-alt-right"></Icon></span>
                                     <div><div className="k-event-template">Attending HR Conference</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "162px", right: "327px", top: "220px", height: "25px" }} className="k-event">
@@ -264,7 +264,7 @@ root.render(
                                     <div><div className="k-event-template">Bob&apos;s Birthday Party</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "162px", right: '0px', top: "247px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="arrow-e"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="caret-alt-right"></Icon></span>
                                     <div><div className="k-event-template">Grand Canyon tour</div></div>
                                 </div>
                                 <div style={{ width: "162px", right: "163px", top: "247px", height: "25px" }} className="k-event">

package/src/scheduler/tests/scheduler-angular-month.tsx

@@ -244,7 +244,7 @@ root.render(
                                     <div><div className="k-event-template">Grand Canyon tour</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "325px", left: '0px', top: "220px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="arrow-w"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="caret-alt-left"></Icon></span>
                                     <div><div className="k-event-template">Attending HR Conference</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "162px", left: "327px", top: "220px", height: "25px" }} className="k-event">
@@ -264,7 +264,7 @@ root.render(
                                     <div><div className="k-event-template">Bob&apos;s Birthday Party</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "162px", left: '0px', top: "247px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="arrow-w"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="caret-alt-left"></Icon></span>
                                     <div><div className="k-event-template">Grand Canyon tour</div></div>
                                 </div>
                                 <div style={{ width: "162px", left: "163px", top: "247px", height: "25px" }} className="k-event">

package/src/scheduler/tests/scheduler-jquery-month.tsx

@@ -255,7 +255,7 @@ root.render(
                                         <div><div className="k-event-template">Grand Canyon tour</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", "--span": "2", "--col": "1", "--row": "3", "--slot": "1", height: "25px" } as React.CSSProperties} className="k-event">
-                                        <span className="k-event-actions"><Icon name="arrow-w"></Icon></span>
+                                        <span className="k-event-actions"><Icon name="caret-alt-left"></Icon></span>
                                         <div><div className="k-event-template">Attending HR Conference</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", "--span": "1", "--col": "3", "--row": "3", "--slot": "1", height: "25px" } as React.CSSProperties} className="k-event">
@@ -275,7 +275,7 @@ root.render(
                                         <div><div className="k-event-template">Bob&apos;s Birthday Party</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", "--span": "1", "--col": "1", "--row": "3", "--slot": "2", height: "25px" } as React.CSSProperties} className="k-event">
-                                        <span className="k-event-actions"><Icon name="arrow-w"></Icon></span>
+                                        <span className="k-event-actions"><Icon name="caret-alt-left"></Icon></span>
                                         <div><div className="k-event-template">Grand Canyon tour</div></div>
                                     </div>
                                     <div style={{ "--span": "1", "--col": "2", "--row": "3", "--slot": "2", height: "25px" } as React.CSSProperties} className="k-event">

package/src/scheduler/tests/scheduler-react-day.tsx

@@ -232,28 +232,28 @@ root.render(
                             <div>
                                 <div className="k-event-template">Attending HR Conference</div>
                             </div>
-                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a><Icon name="arrow-e"></Icon></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
+                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a><Icon name="caret-alt-right"></Icon></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
                         </div>
                         <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "135px", left: "678px", width: "199px", height: "25px" }} >
                             <span className="k-event-actions"></span>
                             <div>
                                 <div className="k-event-template">Attending HR Conference</div>
                             </div>
-                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a><Icon name="arrow-e"></Icon></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
+                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a><Icon name="caret-alt-right"></Icon></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
                         </div>
                         <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "135px", left: "1078px", width: "199px", height: "25px" }} >
                             <span className="k-event-actions"></span>
                             <div>
                                 <div className="k-event-template">Attending HR Conference</div>
                             </div>
-                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a><Icon name="arrow-e"></Icon></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
+                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a><Icon name="caret-alt-right"></Icon></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
                         </div>
                         <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "135px", left: "1478px", width: "199px", height: "25px" }} >
                             <span className="k-event-actions"></span>
                             <div>
                                 <div className="k-event-template">Attending HR Conference</div>
                             </div>
-                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a><Icon name="arrow-e"></Icon></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
+                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a><Icon name="caret-alt-right"></Icon></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
                         </div>
                     </div>
                     <div className="k-scheduler-body">

package/src/scheduler/tests/scheduler.tsx

@@ -76,14 +76,14 @@ root.render(
                                             </table>
                                             <div style={{ backgroundColor: "rgb(81, 160, 237)", borderColor: "rgb(81, 160, 237)", left: '0px', width: "888px", top: '0px' }} className="k-event k-event-inverse">
                                                 <span className="k-event-actions">
-                                                    <Icon name="arrow-w"></Icon>
+                                                    <Icon name="caret-alt-left"></Icon>
                                                 </span>
                                                 <div>
                                                     <div className="k-event-template">Two Weeks in NZ</div>
                                                 </div>
                                                 <span className="k-event-actions">
                                                     <a className="k-link k-event-delete"><Icon name="x"></Icon></a>
-                                                    <Icon name="arrow-e"></Icon>
+                                                    <Icon name="caret-alt-right"></Icon>
                                                 </span>
                                                 <span className="k-resize-handle k-resize-w"></span>
                                                 <span className="k-resize-handle k-resize-e"></span>
@@ -548,8 +548,8 @@ root.render(
                                         <span className="k-event-actions">
                                             <a className="k-link k-event-delete"><Icon name="x"></Icon></a>
                                         </span>
-                                        <span className="k-event-top-actions"><Icon name="arrow-n"></Icon></span>
-                                        <span className="k-event-bottom-actions"><Icon name="arrow-s"></Icon></span>
+                                        <span className="k-event-top-actions"><Icon name="caret-alt-up"></Icon></span>
+                                        <span className="k-event-bottom-actions"><Icon name="caret-alt-down"></Icon></span>
                                         <span className="k-resize-handle k-resize-n"></span>
                                         <span className="k-resize-handle k-resize-s"></span>
                                     </div>

package/src/slider/tests/slider-css-vars.tsx

@@ -221,7 +221,7 @@ root.render(
 
             <section>
                 <div className="k-widget k-slider k-slider-vertical">
-                    <Button icon="arrow-s" rounded="full" className="k-button-decrease"></Button>
+                    <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
                     <div className="k-slider-track-wrap">
                         <ul className="k-reset k-slider-items">
                             <li className="k-tick k-tick-large">
@@ -261,12 +261,12 @@ root.render(
                             <a href="#" className="k-draghandle k-draghandle-end"></a>
                         </div>
                     </div>
-                    <Button icon="arrow-n" rounded="full" className="k-button-increase"></Button>
+                    <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
                 </div>
             </section>
             <section>
                 <div className="k-widget k-slider k-range-slider k-slider-vertical">
-                    <Button icon="arrow-s" rounded="full" className="k-button-decrease"></Button>
+                    <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
                     <div className="k-slider-track-wrap">
                         <ul className="k-reset k-slider-items">
                             <li className="k-tick k-tick-large">
@@ -307,12 +307,12 @@ root.render(
                             <a href="#" className="k-draghandle k-draghandle-end"></a>
                         </div>
                     </div>
-                    <Button icon="arrow-n" rounded="full" className="k-button-increase"></Button>
+                    <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
                 </div>
             </section>
             <section dir="rtl">
                 <div className="k-widget k-slider k-slider-vertical">
-                    <Button icon="arrow-s" rounded="full" className="k-button-decrease"></Button>
+                    <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
                     <div className="k-slider-track-wrap">
                         <ul className="k-reset k-slider-items">
                             <li className="k-tick k-tick-large">
@@ -352,12 +352,12 @@ root.render(
                             <a href="#" className="k-draghandle k-draghandle-end"></a>
                         </div>
                     </div>
-                    <Button icon="arrow-n" rounded="full" className="k-button-increase"></Button>
+                    <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
                 </div>
             </section>
             <section dir="rtl">
                 <div className="k-widget k-slider k-range-slider k-slider-vertical">
-                    <Button icon="arrow-s" rounded="full" className="k-button-decrease"></Button>
+                    <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
                     <div className="k-slider-track-wrap">
                         <ul className="k-reset k-slider-items">
                             <li className="k-tick k-tick-large">
@@ -398,7 +398,7 @@ root.render(
                             <a href="#" className="k-draghandle k-draghandle-end"></a>
                         </div>
                     </div>
-                    <Button icon="arrow-n" rounded="full" className="k-button-increase"></Button>
+                    <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
                 </div>
             </section>