@progress/kendo-themes-html 5.6.1-dev.5 → 5.7.0

package/src/grid/tests/grid-sticky-columns.tsx

@@ -63,28 +63,28 @@ root.render(
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>40</td>
                                         <td colSpan={1}>25</td>
                                     </tr>
-                                    <tr className="k-master-row k-state-selected" role="row">
+                                    <tr className="k-master-row k-selected" role="row">
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Aniseed Syrup(Selected)</td>
                                         <td colSpan={1}>13</td>
                                         <td colSpan={1}>10</td>
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>70</td>
                                         <td colSpan={1}>25</td>
                                     </tr>
-                                    <tr className="k-master-row k-alt k-state-selected" role="row">
+                                    <tr className="k-master-row k-alt k-selected" role="row">
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef Anton (Alt Selected)</td>
                                         <td colSpan={1}>53</td>
                                         <td colSpan={1}>22</td>
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</td>
                                         <td colSpan={1}>0</td>
                                     </tr>
-                                    <tr className="k-master-row k-state-selected k-state-hover" role="row">
+                                    <tr className="k-master-row k-selected k-hover" role="row">
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef (Selected+Hover)</td>
                                         <td colSpan={1}>0</td>
                                         <td colSpan={1}>21.35</td>
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</td>
                                         <td colSpan={1}>0</td>
                                     </tr>
-                                    <tr className="k-master-row k-alt k-state-selected k-state-hover" role="row">
+                                    <tr className="k-master-row k-alt k-selected k-hover" role="row">
                                         <td colSpan={1} className="k-grid-content-sticky" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Gran (Alt Selected+Hover)</td>
                                         <td colSpan={1}>120</td>
                                         <td colSpan={1}>25</td>
@@ -258,7 +258,7 @@ root.render(
                                             </td>
                                         </tr>
 
-                                        <tr className="k-master-row k-state-hover">
+                                        <tr className="k-master-row k-hover">
                                             <td className="k-group-cell"></td>
                                             <td colSpan={1}>
                                                 Employee 1</td>
@@ -272,7 +272,7 @@ root.render(
                                                 False</td>
                                         </tr>
 
-                                        <tr className="k-master-row k-alt k-state-selected">
+                                        <tr className="k-master-row k-alt k-selected">
                                             <td className="k-group-cell"></td>
                                             <td colSpan={1}>
                                                 Employee 2</td>
@@ -286,7 +286,7 @@ root.render(
                                                 True</td>
                                         </tr>
 
-                                        <tr className="k-master-row k-state-hover k-state-selected">
+                                        <tr className="k-master-row k-hover k-selected">
                                             <td className="k-group-cell"></td>
                                             <td colSpan={1}>
                                                 Employee 3</td>

package/src/grid/tests/grid.tsx

@@ -126,7 +126,7 @@ root.render(
                                 <col className="k-hierarchy-col" /><col /><col /><col /><col />
                             </colgroup>
                             <tbody>
-                                <tr className="k-master-row">
+                                <tr className="k-master-row k-expanded">
                                     <td className="k-hierarchy-cell">
                                         <Icon name="collapse" />
                                     </td>

package/src/index.ts

@@ -13,7 +13,7 @@ export * from './nodata/index';
 
 // Indicators
 export * from './avatar/index';
-// export * from './badge/index';
+export * from './badge/index';
 export * from './chip/index';
 export * from './color-preview/index';
 // export * from './loader/index';

package/src/listview/tests/listview-loading.tsx

@@ -20,13 +20,13 @@ root.render(
                 <div className="k-widget k-header k-tabstrip k-tabstrip-top">
                     <div className="k-tabstrip-items-wrapper k-hstack">
                         <ul className="k-tabstrip-items k-reset">
-                            <li className="k-state-active k-item k-tab-on-top k-first">
+                            <li className="k-active k-item k-tab-on-top k-first">
                                 <span className="k-loading k-complete"></span>
                                 <span className="k-link">Child listview with loading</span>
                             </li>
                         </ul>
                     </div>
-                    <div className="k-content k-state-active" style={{ display: "block" }} id="tabstrip-1">
+                    <div className="k-content k-active" style={{ display: "block" }} id="tabstrip-1">
                         <div className="k-widget k-listview k-d-flex">
                             <div className="k-listview-content">
                                 <div className="k-loading-mask k-opaque" style={{ width: '100%', height: "100%", top: '0px', left: '0px' }}><span className="k-loading-text">Loading...</span><div className="k-loading-image"></div><div className="k-loading-color"></div></div>

package/src/loader/tests/loader-container-colors.tsx

@@ -29,7 +29,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -45,7 +45,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-secondary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-secondary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -61,7 +61,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-tertiary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-tertiary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -77,7 +77,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-info">Loading...</div>
+                        <div className="k-loader-container-label !k-text-info">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -93,7 +93,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-success">Loading...</div>
+                        <div className="k-loader-container-label !k-text-success">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -109,7 +109,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-warning">Loading...</div>
+                        <div className="k-loader-container-label !k-text-warning">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -125,7 +125,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-error">Loading...</div>
+                        <div className="k-loader-container-label !k-text-error">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -141,7 +141,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-dark">Loading...</div>
+                        <div className="k-loader-container-label !k-text-dark">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -157,7 +157,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-light">Loading...</div>
+                        <div className="k-loader-container-label !k-text-light">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -173,7 +173,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-inverse">Loading...</div>
+                        <div className="k-loader-container-label !k-text-inverse">Loading...</div>
                     </div>
                 </div>
             </span>

package/src/loader/tests/loader-container-overlay.tsx

@@ -34,7 +34,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -49,7 +49,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -65,7 +65,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -80,7 +80,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>

package/src/loader/tests/loader-container.tsx

@@ -35,7 +35,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -50,7 +50,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -65,7 +65,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -81,7 +81,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -96,7 +96,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -111,7 +111,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -127,7 +127,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -142,7 +142,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>
@@ -157,7 +157,7 @@ root.render(
                                 <span className="k-loader-segment"></span>
                             </div>
                         </div>
-                        <div className="k-loader-container-label k-text-primary">Loading...</div>
+                        <div className="k-loader-container-label !k-text-primary">Loading...</div>
                     </div>
                 </div>
             </span>

package/src/menu-button/menu-button.tsx

@@ -55,10 +55,7 @@ export class MenuButton extends React.Component<MenuButtonProps> {
                 dir={this.props.dir}
                 className={classNames(
                     className,
-                    'k-menu-button',
-                    {
-                        'k-icon-button': icon !== undefined,
-                    }
+                    'k-menu-button'
                 )}
                 text={text}
                 size={size}

package/src/notification/tests/notification-angular.tsx

@@ -41,7 +41,7 @@ root.render(
                     <div className="k-widget k-notification k-notification-closable">
                         <div className="k-notification-wrap">
                             <div className="k-notification-content">Closable notification</div>
-                            <Icon name="close" />
+                            <Icon name="x" />
                         </div>
                     </div>
                 </div>
@@ -156,7 +156,7 @@ root.render(
                     <div className="k-widget k-notification k-notification-closable">
                         <div className="k-notification-wrap">
                             <div className="k-notification-content">Closable notification</div>
-                            <Icon name="close" />
+                            <Icon name="x" />
                         </div>
                     </div>
                 </div>

package/src/notification/tests/notification-custom-angular.tsx

@@ -45,7 +45,7 @@ root.render(
                                     <div>Closable multiline notification</div>
                                     <div>Closable multiline notification</div>
                                 </div>
-                                <Icon name="close" />
+                                <Icon name="x" />
                             </div>
                         </div>
                     </div>
@@ -63,7 +63,7 @@ root.render(
                     <div className="k-widget k-notification k-notification-closable">
                         <div className="k-notification-wrap">
                             <div className="k-notification-content">Full width notification</div>
-                            <Icon name="close" />
+                            <Icon name="x" />
                         </div>
                     </div>
                 </div>
@@ -83,7 +83,7 @@ root.render(
                                     <div>Closable multiline notification</div>
                                     <div>Closable multiline notification</div>
                                 </div>
-                                <Icon name="close" />
+                                <Icon name="x" />
                             </div>
                         </div>
                     </div>
@@ -101,7 +101,7 @@ root.render(
                     <div className="k-widget k-notification k-notification-closable">
                         <div className="k-notification-wrap">
                             <div className="k-notification-content">Full width notification</div>
-                            <Icon name="close" />
+                            <Icon name="x" />
                         </div>
                     </div>
                 </div>

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

@@ -42,7 +42,7 @@ root.render(
                     <div className="k-widget k-popup k-notification k-notification-closable">
                         <div className="k-notification-wrap">
                             <div className="k-notification-content">Closable notification</div>
-                            <Icon name="close" />
+                            <Icon name="x" />
                         </div>
                     </div>
                 </div>
@@ -157,7 +157,7 @@ root.render(
                     <div className="k-widget k-popup k-notification k-notification-closable">
                         <div className="k-notification-wrap">
                             <div className="k-notification-content">Closable notification</div>
-                            <Icon name="close" />
+                            <Icon name="x" />
                         </div>
                     </div>
                 </div>

package/src/pager/tests/pager-responsive.tsx

@@ -25,8 +25,8 @@ root.render(
 
             <span>lg</span>
             <div className="k-pager k-widget k-pager-lg">
-                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                <a className="k-link k-pager-nav k-focus"><Icon name="arrow-w" /></a>
+                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                <a className="k-link k-pager-nav k-focus"><Icon name="caret-alt-left" /></a>
                 <div className="k-pager-numbers-wrap">
                     <select className="k-picker k-dropdown-list k-dropdown">
                         <option>1</option>
@@ -40,15 +40,15 @@ root.render(
                         <li><a className="k-link k-selected k-focus">6</a></li>
                     </ul>
                 </div>
-                <a className="k-link k-pager-nav k-hover"><Icon name="arrow-e" /></a>
-                <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                <a className="k-link k-pager-nav k-hover"><Icon name="caret-alt-right" /></a>
+                <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                 <span className="k-pager-sizes k-label">
                     <DropdownList value="20" />
                     items per page
                 </span>
 
-                <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
@@ -56,8 +56,8 @@ root.render(
 
             <span>md</span>
             <div className="k-pager k-widget k-pager-md">
-                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                 <div className="k-pager-numbers-wrap">
                     <select className="k-picker k-dropdown-list k-dropdown">
                         <option>1</option>
@@ -70,15 +70,15 @@ root.render(
                         <li><a className="k-link">5</a></li>
                     </ul>
                 </div>
-                <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                 <span className="k-pager-sizes k-label">
                     <DropdownList value="20" />
                     items per page
                 </span>
 
-                <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
@@ -86,8 +86,8 @@ root.render(
 
             <span>sm</span>
             <div className="k-pager k-widget k-pager-sm">
-                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                 <div className="k-pager-numbers-wrap">
                     <select className="k-picker k-dropdown-list k-dropdown">
                         <option>1</option>
@@ -100,21 +100,21 @@ root.render(
                         <li><a className="k-link">5</a></li>
                     </ul>
                 </div>
-                <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                 <span className="k-pager-sizes k-label">
                     <DropdownList value="20" />
                     items per page
                 </span>
 
-                <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
             <div className="k-pager k-widget k-pager-sm">
-                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                 <div className="k-pager-numbers-wrap">
                     <select className="k-picker k-dropdown-list k-dropdown">
                         <option>1</option>
@@ -127,15 +127,15 @@ root.render(
                         <li><a className="k-link">5</a></li>
                     </ul>
                 </div>
-                <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                 <span className="k-pager-sizes k-label">
                     <DropdownList value="20" />
                     items per page
                 </span>
 
-                <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
@@ -146,8 +146,8 @@ root.render(
 
             <span>lg</span>
             <div className="k-pager k-widget k-pager-lg" dir="rtl">
-                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                 <div className="k-pager-numbers-wrap">
                     <select className="k-picker k-dropdown-list k-dropdown">
                         <option>1</option>
@@ -160,15 +160,15 @@ root.render(
                         <li><a className="k-link">5</a></li>
                     </ul>
                 </div>
-                <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                 <span className="k-pager-sizes k-label">
                     <DropdownList value="20" />
                     items per page
                 </span>
 
-                <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
@@ -176,8 +176,8 @@ root.render(
 
             <span>md</span>
             <div className="k-pager k-widget k-pager-md" dir="rtl">
-                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                 <div className="k-pager-numbers-wrap">
                     <select className="k-picker k-dropdown-list k-dropdown">
                         <option>1</option>
@@ -190,15 +190,15 @@ root.render(
                         <li><a className="k-link">5</a></li>
                     </ul>
                 </div>
-                <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                 <span className="k-pager-sizes k-label">
                     <DropdownList value="20" />
                     items per page
                 </span>
 
-                <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
@@ -206,8 +206,8 @@ root.render(
 
             <span>sm</span>
             <div className="k-pager k-widget k-pager-sm" dir="rtl">
-                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                 <div className="k-pager-numbers-wrap">
                     <select className="k-picker k-dropdown-list k-dropdown">
                         <option>1</option>
@@ -220,21 +220,21 @@ root.render(
                         <li><a className="k-link">5</a></li>
                     </ul>
                 </div>
-                <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                 <span className="k-pager-sizes k-label">
                     <DropdownList value="20" />
                     items per page
                 </span>
 
-                <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
             <div className="k-pager k-widget k-pager-sm" dir="rtl">
-                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                 <div className="k-pager-numbers-wrap">
                     <select className="k-picker k-dropdown-list k-dropdown">
                         <option>1</option>
@@ -247,15 +247,15 @@ root.render(
                         <li><a className="k-link">5</a></li>
                     </ul>
                 </div>
-                <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                 <span className="k-pager-sizes k-label">
                     <DropdownList value="20" />
                     items per page
                 </span>
 
-                <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>