@progress/kendo-react-buttons 5.10.0-dev.202301092204 → 5.10.0-dev.202301111405

package/dist/es/Button.d.ts

@@ -84,6 +84,11 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
         selected: PropTypes.Requireable<boolean>;
         togglable: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         imageAlt: PropTypes.Requireable<string>;

package/dist/es/Button.js

@@ -37,20 +37,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, kendoThemeMaps, IconWrap, svgIconPropType } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
 /**
  * @hidden
  */
 function iconElement(_a) {
-    var imageUrl = _a.imageUrl, icon = _a.icon, iconClass = _a.iconClass, imageAlt = _a.imageAlt;
+    var imageUrl = _a.imageUrl, name = _a.name, iconClass = _a.iconClass, svgIcon = _a.svgIcon, imageAlt = _a.imageAlt;
     if (imageUrl) {
         return (React.createElement("img", { role: "presentation", className: 'k-button-icon', alt: imageAlt, src: imageUrl }));
     }
-    else if (icon) {
-        var iconClasses = classNames('k-button-icon k-icon', 'k-i-' + icon);
-        return (React.createElement("span", { role: "presentation", className: iconClasses }));
+    else if (name || svgIcon) {
+        return React.createElement(IconWrap, { className: 'k-button-icon', name: name, icon: svgIcon });
     }
     else if (iconClass) {
         return (React.createElement("span", { role: "presentation", className: classNames('k-button-icon', iconClass) }));
@@ -108,11 +107,12 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.rounded, rounded = _d === void 0 ? Button.defaultProps.rounded : _d, _e = _b.fillMode, fillMode = _e === void 0 ? Button.defaultProps.fillMode : _e, _f = _b.themeColor, themeColor = _f === void 0 ? Button.defaultProps.themeColor : _f, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick", "size", "rounded", "fillMode", "themeColor"]);
+        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, svgIcon = _b.svgIcon, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.rounded, rounded = _d === void 0 ? Button.defaultProps.rounded : _d, _e = _b.fillMode, fillMode = _e === void 0 ? Button.defaultProps.fillMode : _e, _f = _b.themeColor, themeColor = _f === void 0 ? Button.defaultProps.themeColor : _f, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "svgIcon", "imageUrl", "imageAlt", "className", "onClick", "size", "rounded", "fillMode", "themeColor"]);
         var hasIcon = (icon !== undefined || iconClass !== undefined || imageUrl !== undefined);
         var hasChildren = children !== undefined;
         var iconEl = iconElement({
-            icon: icon,
+            name: icon,
+            svgIcon: svgIcon,
             iconClass: iconClass,
             imageUrl: imageUrl,
             imageAlt: imageAlt
@@ -146,6 +146,7 @@ var Button = /** @class */ (function (_super) {
         selected: PropTypes.bool,
         togglable: PropTypes.bool,
         icon: PropTypes.string,
+        svgIcon: svgIconPropType,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
         imageAlt: PropTypes.string,

package/dist/es/ButtonInterface.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
@@ -18,6 +19,7 @@ export interface ButtonInterface {
      * Defines the name for an existing icon in a KendoReact theme ([see example]({% slug icons_button %})). The icon is rendered inside the Button by a `span.k-icon` element.
      */
     icon?: string;
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class—or multiple classes separated by spaces—which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
      */

package/dist/es/ButtonInterface.js

@@ -1,2 +1,3 @@
+/* eslint-disable max-len */
 export {};
 // tslint:enable:max-line-length

package/dist/es/Chip/Chip.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index';
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
@@ -41,21 +42,33 @@ export interface ChipProps {
      */
     removable?: boolean;
     /**
-     * Determines if the Chip has custom `removeIcon`.
+     * Determines if the Chip has custom font `removeIcon`.
      */
     removeIcon?: string;
+    /**
+     * Determines if the Chip has custom SVG `removeIcon`.
+     */
+    removeSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip is disabled.
      */
     disabled?: boolean;
     /**
-     * Determines if the Chip has an `icon`.
+     * Determines if the Chip has a font `icon`.
      */
     icon?: string;
     /**
-     * Determines if the Chip has custom selection `icon`.
+     * Determines if the Chip has an SVG `icon`.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip has custom selection font `icon`.
      */
     selectedIcon?: string;
+    /**
+     * Determines if the Chip has custom selection SVG `icon`.
+     */
+    selectedSvgIcon?: SVGIcon;
     /**
      * Triggered on Chip removing.
      */

package/dist/es/Chip/Chip.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { ChipListSelectionContext, ChipListFocusContext, ChipListDataContext } from './ChipList';
-import { classNames, useDir, getTabIndex, Keys, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, useDir, getTabIndex, Keys, IconWrap, kendoThemeMaps, toIconName, svgIconPropType } from '@progress/kendo-react-common';
 import { FOCUS_ACTION } from './focus-reducer';
 import { DATA_ACTION } from './data-reducer';
 import { SELECTION_ACTION } from './selection-reducer';
@@ -117,15 +117,17 @@ export var Chip = React.forwardRef(function (props, ref) {
             _a["k-chip-".concat(props.fillMode)] = props.fillMode,
             _a["k-chip-".concat(props.fillMode, "-").concat(props.themeColor)] = Boolean(props.fillMode && props.themeColor),
             _a), props.className), "aria-checked": selected, "aria-disabled": props.disabled, "aria-describedby": props.ariaDescribedBy, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }),
-        (selected && props.selectedIcon) && React.createElement("span", { className: classNames('k-chip-icon', 'k-icon', props.selectedIcon) }),
-        props.icon && React.createElement("span", { className: classNames('k-chip-icon', 'k-icon', props.icon) }),
+        (selected && (props.selectedIcon || props.selectedSvgIcon)) &&
+            React.createElement(IconWrap, { className: 'k-chip-icon', name: props.selectedIcon ? toIconName(props.selectedIcon) : undefined, icon: props.selectedSvgIcon }),
+        (props.icon || props.svgIcon) &&
+            React.createElement(IconWrap, { className: 'k-chip-icon', name: props.icon ? toIconName(props.icon) : undefined, icon: props.svgIcon }),
         React.createElement("span", { className: 'k-chip-content' }, props.children !== undefined
             ? props.children
             : props.text &&
                 React.createElement("span", { "aria-label": props.text, className: 'k-chip-label' }, props.text)),
         props.removable && (React.createElement("span", { className: "k-chip-actions" },
-            React.createElement("span", { className: classNames('k-chip-action', 'k-chip-remove-action') },
-                React.createElement("span", { className: classNames('k-icon', props.removeIcon), onClick: handleRemove }))))));
+            React.createElement("span", { className: classNames('k-chip-action', 'k-chip-remove-action'), onClick: handleRemove },
+                React.createElement(IconWrap, { name: props.removeIcon ? toIconName(props.removeIcon) : undefined, icon: props.removeSvgIcon }))))));
 });
 var propTypes = {
     id: PropTypes.string,
@@ -134,9 +136,12 @@ var propTypes = {
     dir: PropTypes.oneOf(['ltr', 'rtl']),
     removable: PropTypes.bool,
     removeIcon: PropTypes.string,
+    removeIconSvg: svgIconPropType,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: svgIconPropType,
     selectedIcon: PropTypes.string,
+    selectedIconSvg: svgIconPropType,
     onRemove: PropTypes.func,
     dataItem: PropTypes.any,
     selected: PropTypes.bool,

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { kendoThemeMaps, useZIndexContext, validatePackage, ZIndexContext } from '@progress/kendo-react-common';
+import { IconWrap, kendoThemeMaps, svgIconPropType, useZIndexContext, validatePackage, ZIndexContext } from '@progress/kendo-react-common';
 import { classNames, guid, useDir, dispatchEvent, Keys, getTabIndex } from '@progress/kendo-react-common';
 import { FloatingActionButtonItem } from './FloatingActionButtonItem';
 import { packageMetadata } from '../package-metadata';
@@ -47,7 +47,7 @@ var DEFAULT_FAB_ZINDEX = 100;
  */
 export var FloatingActionButton = React.forwardRef(function (props, ref) {
     validatePackage(packageMetadata);
-    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.size, size = _c === void 0 ? defaultProps.size : _c, style = props.style, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "iconClass", "id", "items", "item", "text", "positionMode", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
+    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, svgIcon = props.svgIcon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.size, size = _c === void 0 ? defaultProps.size : _c, style = props.style, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "svgIcon", "iconClass", "id", "items", "item", "text", "positionMode", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
     var zIndexContext = useZIndexContext();
     var currentZIndex = zIndexContext ? zIndexContext + ZINDEX_FAB_STEP : DEFAULT_FAB_ZINDEX;
     var target = React.useRef(null);
@@ -217,15 +217,15 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
     var fabItems = (items && (items.map(function (element, index) {
         return (React.createElement(FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: "".concat(listId, "-").concat(index), disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: classNames(element.className, getTextDirectionClass(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
     })));
-    var isIconFab = icon && !text;
+    var isIconFab = Boolean((icon || svgIcon) && !text);
     var fabWidth = elementRef.current ? elementRef.current.offsetWidth : 0;
     var iconWidth = 32;
     var spacing = (fabWidth / 2) - (iconWidth / 2);
     return (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
         React.createElement(React.Fragment, null,
             React.createElement("button", __assign({ ref: elementRef, id: id || buttonId, role: items ? 'menubutton' : 'button', type: 'button', "aria-disabled": disabled, "aria-expanded": items ? open : undefined, "aria-haspopup": items ? true : false, "aria-label": "".concat(text || '', " floatingactionbutton"), "aria-owns": items ? listId : undefined, "aria-activedescendant": focusedIndex >= 0 && items ? "".concat(listId, "-").concat(focusedIndex) : undefined, tabIndex: getTabIndex(tabIndex, disabled), accessKey: accessKey, dir: dir, disabled: disabled, className: buttonClassNames, style: style, onClick: handleClick, onMouseDown: handleMouseDown, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }, others),
-                icon ?
-                    React.createElement("span", { role: "presentation", className: classNames("k-fab-icon k-icon k-i-".concat(icon)) }) :
+                (icon || svgIcon) ?
+                    React.createElement(IconWrap, { className: "k-fab-icon", name: icon, icon: svgIcon }) :
                     iconClass ?
                         React.createElement("span", { role: "presentation", className: iconClass }) :
                         null,
@@ -249,6 +249,7 @@ FloatingActionButton.propTypes = {
     accessKey: PropTypes.string,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: svgIconPropType,
     iconClass: PropTypes.string,
     text: PropTypes.string,
     alignOffset: PropTypes.shape({

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -8,6 +8,7 @@ import { FloatingActionButtonPositionMode } from '../models/position-mode';
 import { FloatingActionButtonSize } from '../models/size';
 import { FloatingActionButtonThemeColor } from '../models/theme-color';
 import { FloatingActionButtonRounded } from '../models/rounded';
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
@@ -40,6 +41,10 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * Defines the icon rendered in the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
      */
     icon?: string;
+    /**
+     * Defines the SVG icon rendered in the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class or multiple classes separated by spaces which are applied
      * to a `span` element inside the Floating Action Button. Allows the usage of custom icons.

package/dist/es/ListButton/ButtonItem.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { classNames } from '@progress/kendo-react-common';
+import { classNames, IconWrap } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
 export var ButtonItem = function (props) {
-    var _a;
     var handleClick = React.useCallback(function (event) {
         props.onClick(event, props.index);
     }, [props]);
@@ -16,10 +15,7 @@ export var ButtonItem = function (props) {
         }), key: "icon" }, As
         ? (React.createElement(As, { item: props.dataItem, itemIndex: props.index }))
         : (React.createElement(React.Fragment, null,
-            (props.dataItem.icon || props.dataItem.iconClass) && (React.createElement("span", { className: classNames('k-icon', (_a = {},
-                    _a["k-i-".concat(props.dataItem.icon)] = props.dataItem.icon,
-                    _a["".concat(props.dataItem.iconClass)] = props.dataItem.iconClass,
-                    _a)) })),
+            (props.dataItem.icon || props.dataItem.iconClass) && (React.createElement(IconWrap, { className: props.dataItem.iconClass, name: props.dataItem.icon, icon: props.dataItem.svgIcon })),
             (props.dataItem.imageUrl) && (React.createElement("img", { role: "presentation", alt: "", src: props.dataItem.imageUrl, className: 'k-icon' })),
             (text) && (React.createElement("span", { className: "k-menu-link-text" }, text))))))));
     return ((props.item !== undefined && /* to be removed in 5.0.0 */

package/dist/es/ListButton/DropDownButton.d.ts

@@ -46,6 +46,11 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
         tabIndex: PropTypes.Requireable<number>;
         disabled: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         popupSettings: PropTypes.Requireable<object>;

package/dist/es/ListButton/DropDownButton.js

@@ -27,7 +27,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Button } from './../main';
-import { classNames, guid, Keys, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, kendoThemeMaps, svgIconPropType } from '@progress/kendo-react-common';
 import { dispatchEvent } from '@progress/kendo-react-common';
 import { navigate as navigation } from './utils/navigation';
 import { DropDownButtonItem } from './DropDownButtonItem';
@@ -215,7 +215,7 @@ var DropDownButton = /** @class */ (function (_super) {
         return (React.createElement("div", { id: id, style: style, className: classNames('k-dropdown-button', {
                 'k-focus': this.state.focused
             }, this.props.className), onKeyDown: this.onKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
+            React.createElement(Button, { size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, svgIcon: this.props.svgIcon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
             this.renderPopup(rtl)));
     };
     /**
@@ -285,6 +285,7 @@ var DropDownButton = /** @class */ (function (_super) {
         tabIndex: PropTypes.number,
         disabled: PropTypes.bool,
         icon: PropTypes.string,
+        svgIcon: svgIconPropType,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
         popupSettings: PropTypes.object,

package/dist/es/ListButton/SplitButton.d.ts

@@ -48,6 +48,11 @@ export declare class SplitButton extends React.Component<SplitButtonProps, Split
         tabIndex: PropTypes.Requireable<number>;
         disabled: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         popupSettings: PropTypes.Requireable<object>;

package/dist/es/ListButton/SplitButton.js

@@ -16,7 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Button } from './../main';
-import { classNames, guid, kendoThemeMaps, Keys } from '@progress/kendo-react-common';
+import { classNames, guid, kendoThemeMaps, Keys, svgIconPropType } from '@progress/kendo-react-common';
 import { dispatchEvent } from '@progress/kendo-react-common';
 import { ButtonItem } from './ButtonItem';
 import { SplitButtonItem } from './SplitButtonItem';
@@ -25,6 +25,7 @@ import { Popup } from '@progress/kendo-react-popup';
 import { getAnchorAlign, getPopupAlign } from './utils/popup';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the [KendoReact SplitButton component]({% slug overview_splitbutton %}).
  *
@@ -220,8 +221,8 @@ var SplitButton = /** @class */ (function (_super) {
         return (React.createElement("div", { id: id, style: style, className: classNames('k-split-button', 'k-button-group', {
                 'k-focus': this.state.focused
             }, "k-rounded-".concat(kendoThemeMaps.roundedMap[this.props.rounded || 'medium']), this.props.className), onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { ref: function (el) { return _this.mainButton = el && el.element; }, type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: function (event) { return _this.onItemClick(event, -1); }, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, className: this.props.buttonClass, icon: this.props.icon, iconClass: this.props.iconClass, imageUrl: this.props.imageUrl, dir: dir, "aria-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
-            React.createElement(Button, { type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, icon: "caret-alt-down", className: "k-split-button-arrow", disabled: disabled || undefined, tabIndex: -1, onClick: this.onSplitPartClick, onMouseDown: this.onDownSplitPart, onPointerDown: this.onDownSplitPart, dir: dir, "aria-label": "menu toggling button" }),
+            React.createElement(Button, { ref: function (el) { return _this.mainButton = el && el.element; }, type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: function (event) { return _this.onItemClick(event, -1); }, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, className: this.props.buttonClass, icon: this.props.icon, svgIcon: this.props.svgIcon, iconClass: this.props.iconClass, imageUrl: this.props.imageUrl, dir: dir, "aria-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
+            React.createElement(Button, { type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, icon: "caret-alt-down", svgIcon: caretAltDownIcon, className: "k-split-button-arrow", disabled: disabled || undefined, tabIndex: -1, onClick: this.onSplitPartClick, onMouseDown: this.onDownSplitPart, onPointerDown: this.onDownSplitPart, dir: dir, "aria-label": "menu toggling button" }),
             this.renderPopup(rtl)));
     };
     /**
@@ -298,6 +299,7 @@ var SplitButton = /** @class */ (function (_super) {
         tabIndex: PropTypes.number,
         disabled: PropTypes.bool,
         icon: PropTypes.string,
+        svgIcon: svgIconPropType,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
         popupSettings: PropTypes.object,

package/dist/es/ListButton/models/ButtonItem.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * The interface for describing items that can be passed to the `items` property of the SplitButton or the DropDownButton as an alternative to passing them as children.
  */
@@ -10,6 +11,10 @@ export interface ButtonItem {
      * Defines an icon that will be rendered next to the item text.
      */
     icon?: string;
+    /**
+     * Defines an SVG icon that will be rendered next to the item text.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the item text.
      */

package/dist/es/ListButton/models/ButtonItem.js

@@ -1,2 +1,3 @@
+/* eslint-disable max-len */
 export {};
 // tslint:enable:max-line-length

package/dist/es/ListButton/models/ListButtonProps.d.ts

@@ -2,7 +2,7 @@
 import { ButtonsPopupSettings } from './PopupSettings';
 import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, DropDownButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent } from './events';
 import { ButtonItemProps } from '../ButtonItem';
-import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { KendoReactComponentBaseProps, SVGIcon } from '@progress/kendo-react-common';
 export interface DropDownButtonProps extends KendoReactComponentBaseProps {
     /**
      * Specifies the `accessKey` of the main button.
@@ -44,6 +44,10 @@ export interface DropDownButtonProps extends KendoReactComponentBaseProps {
      * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
     icon?: string;
+    /**
+     * Defines a SVG icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
@@ -199,6 +203,10 @@ export interface SplitButtonProps extends KendoReactComponentBaseProps {
      * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */
     icon?: string;
+    /**
+     * Defines a SVG icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-buttons',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673300411,
+    publishDate: 1673444453,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/Button.d.ts

@@ -84,6 +84,11 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
         selected: PropTypes.Requireable<boolean>;
         togglable: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         imageAlt: PropTypes.Requireable<string>;

package/dist/npm/Button.js

@@ -47,13 +47,12 @@ var package_metadata_1 = require("./package-metadata");
  * @hidden
  */
 function iconElement(_a) {
-    var imageUrl = _a.imageUrl, icon = _a.icon, iconClass = _a.iconClass, imageAlt = _a.imageAlt;
+    var imageUrl = _a.imageUrl, name = _a.name, iconClass = _a.iconClass, svgIcon = _a.svgIcon, imageAlt = _a.imageAlt;
     if (imageUrl) {
         return (React.createElement("img", { role: "presentation", className: 'k-button-icon', alt: imageAlt, src: imageUrl }));
     }
-    else if (icon) {
-        var iconClasses = (0, kendo_react_common_1.classNames)('k-button-icon k-icon', 'k-i-' + icon);
-        return (React.createElement("span", { role: "presentation", className: iconClasses }));
+    else if (name || svgIcon) {
+        return React.createElement(kendo_react_common_1.IconWrap, { className: 'k-button-icon', name: name, icon: svgIcon });
     }
     else if (iconClass) {
         return (React.createElement("span", { role: "presentation", className: (0, kendo_react_common_1.classNames)('k-button-icon', iconClass) }));
@@ -111,11 +110,12 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.rounded, rounded = _d === void 0 ? Button.defaultProps.rounded : _d, _e = _b.fillMode, fillMode = _e === void 0 ? Button.defaultProps.fillMode : _e, _f = _b.themeColor, themeColor = _f === void 0 ? Button.defaultProps.themeColor : _f, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick", "size", "rounded", "fillMode", "themeColor"]);
+        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, svgIcon = _b.svgIcon, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.rounded, rounded = _d === void 0 ? Button.defaultProps.rounded : _d, _e = _b.fillMode, fillMode = _e === void 0 ? Button.defaultProps.fillMode : _e, _f = _b.themeColor, themeColor = _f === void 0 ? Button.defaultProps.themeColor : _f, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "svgIcon", "imageUrl", "imageAlt", "className", "onClick", "size", "rounded", "fillMode", "themeColor"]);
         var hasIcon = (icon !== undefined || iconClass !== undefined || imageUrl !== undefined);
         var hasChildren = children !== undefined;
         var iconEl = iconElement({
-            icon: icon,
+            name: icon,
+            svgIcon: svgIcon,
             iconClass: iconClass,
             imageUrl: imageUrl,
             imageAlt: imageAlt
@@ -149,6 +149,7 @@ var Button = /** @class */ (function (_super) {
         selected: PropTypes.bool,
         togglable: PropTypes.bool,
         icon: PropTypes.string,
+        svgIcon: kendo_react_common_1.svgIconPropType,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
         imageAlt: PropTypes.string,

package/dist/npm/ButtonInterface.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
@@ -18,6 +19,7 @@ export interface ButtonInterface {
      * Defines the name for an existing icon in a KendoReact theme ([see example]({% slug icons_button %})). The icon is rendered inside the Button by a `span.k-icon` element.
      */
     icon?: string;
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class—or multiple classes separated by spaces—which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
      */

package/dist/npm/ButtonInterface.js

@@ -1,3 +1,4 @@
 "use strict";
+/* eslint-disable max-len */
 Object.defineProperty(exports, "__esModule", { value: true });
 // tslint:enable:max-line-length

package/dist/npm/Chip/Chip.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index';
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
@@ -41,21 +42,33 @@ export interface ChipProps {
      */
     removable?: boolean;
     /**
-     * Determines if the Chip has custom `removeIcon`.
+     * Determines if the Chip has custom font `removeIcon`.
      */
     removeIcon?: string;
+    /**
+     * Determines if the Chip has custom SVG `removeIcon`.
+     */
+    removeSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip is disabled.
      */
     disabled?: boolean;
     /**
-     * Determines if the Chip has an `icon`.
+     * Determines if the Chip has a font `icon`.
      */
     icon?: string;
     /**
-     * Determines if the Chip has custom selection `icon`.
+     * Determines if the Chip has an SVG `icon`.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip has custom selection font `icon`.
      */
     selectedIcon?: string;
+    /**
+     * Determines if the Chip has custom selection SVG `icon`.
+     */
+    selectedSvgIcon?: SVGIcon;
     /**
      * Triggered on Chip removing.
      */

package/dist/npm/Chip/Chip.js

@@ -120,15 +120,17 @@ exports.Chip = React.forwardRef(function (props, ref) {
             _a["k-chip-".concat(props.fillMode)] = props.fillMode,
             _a["k-chip-".concat(props.fillMode, "-").concat(props.themeColor)] = Boolean(props.fillMode && props.themeColor),
             _a), props.className), "aria-checked": selected, "aria-disabled": props.disabled, "aria-describedby": props.ariaDescribedBy, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }),
-        (selected && props.selectedIcon) && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-chip-icon', 'k-icon', props.selectedIcon) }),
-        props.icon && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-chip-icon', 'k-icon', props.icon) }),
+        (selected && (props.selectedIcon || props.selectedSvgIcon)) &&
+            React.createElement(kendo_react_common_1.IconWrap, { className: 'k-chip-icon', name: props.selectedIcon ? (0, kendo_react_common_1.toIconName)(props.selectedIcon) : undefined, icon: props.selectedSvgIcon }),
+        (props.icon || props.svgIcon) &&
+            React.createElement(kendo_react_common_1.IconWrap, { className: 'k-chip-icon', name: props.icon ? (0, kendo_react_common_1.toIconName)(props.icon) : undefined, icon: props.svgIcon }),
         React.createElement("span", { className: 'k-chip-content' }, props.children !== undefined
             ? props.children
             : props.text &&
                 React.createElement("span", { "aria-label": props.text, className: 'k-chip-label' }, props.text)),
         props.removable && (React.createElement("span", { className: "k-chip-actions" },
-            React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-chip-action', 'k-chip-remove-action') },
-                React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-icon', props.removeIcon), onClick: handleRemove }))))));
+            React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-chip-action', 'k-chip-remove-action'), onClick: handleRemove },
+                React.createElement(kendo_react_common_1.IconWrap, { name: props.removeIcon ? (0, kendo_react_common_1.toIconName)(props.removeIcon) : undefined, icon: props.removeSvgIcon }))))));
 });
 var propTypes = {
     id: PropTypes.string,
@@ -137,9 +139,12 @@ var propTypes = {
     dir: PropTypes.oneOf(['ltr', 'rtl']),
     removable: PropTypes.bool,
     removeIcon: PropTypes.string,
+    removeIconSvg: kendo_react_common_1.svgIconPropType,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: kendo_react_common_1.svgIconPropType,
     selectedIcon: PropTypes.string,
+    selectedIconSvg: kendo_react_common_1.svgIconPropType,
     onRemove: PropTypes.func,
     dataItem: PropTypes.any,
     selected: PropTypes.bool,

package/dist/npm/FloatingActionButton/FloatingActionButton.js

@@ -50,7 +50,7 @@ var DEFAULT_FAB_ZINDEX = 100;
  */
 exports.FloatingActionButton = React.forwardRef(function (props, ref) {
     (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
-    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.size, size = _c === void 0 ? defaultProps.size : _c, style = props.style, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "iconClass", "id", "items", "item", "text", "positionMode", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
+    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, svgIcon = props.svgIcon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.size, size = _c === void 0 ? defaultProps.size : _c, style = props.style, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "svgIcon", "iconClass", "id", "items", "item", "text", "positionMode", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
     var zIndexContext = (0, kendo_react_common_1.useZIndexContext)();
     var currentZIndex = zIndexContext ? zIndexContext + ZINDEX_FAB_STEP : DEFAULT_FAB_ZINDEX;
     var target = React.useRef(null);
@@ -220,15 +220,15 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
     var fabItems = (items && (items.map(function (element, index) {
         return (React.createElement(FloatingActionButtonItem_1.FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: "".concat(listId, "-").concat(index), disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: (0, kendo_react_common_2.classNames)(element.className, (0, utils_1.getTextDirectionClass)(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
     })));
-    var isIconFab = icon && !text;
+    var isIconFab = Boolean((icon || svgIcon) && !text);
     var fabWidth = elementRef.current ? elementRef.current.offsetWidth : 0;
     var iconWidth = 32;
     var spacing = (fabWidth / 2) - (iconWidth / 2);
     return (React.createElement(kendo_react_common_1.ZIndexContext.Provider, { value: currentZIndex },
         React.createElement(React.Fragment, null,
             React.createElement("button", __assign({ ref: elementRef, id: id || buttonId, role: items ? 'menubutton' : 'button', type: 'button', "aria-disabled": disabled, "aria-expanded": items ? open : undefined, "aria-haspopup": items ? true : false, "aria-label": "".concat(text || '', " floatingactionbutton"), "aria-owns": items ? listId : undefined, "aria-activedescendant": focusedIndex >= 0 && items ? "".concat(listId, "-").concat(focusedIndex) : undefined, tabIndex: (0, kendo_react_common_2.getTabIndex)(tabIndex, disabled), accessKey: accessKey, dir: dir, disabled: disabled, className: buttonClassNames, style: style, onClick: handleClick, onMouseDown: handleMouseDown, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }, others),
-                icon ?
-                    React.createElement("span", { role: "presentation", className: (0, kendo_react_common_2.classNames)("k-fab-icon k-icon k-i-".concat(icon)) }) :
+                (icon || svgIcon) ?
+                    React.createElement(kendo_react_common_1.IconWrap, { className: "k-fab-icon", name: icon, icon: svgIcon }) :
                     iconClass ?
                         React.createElement("span", { role: "presentation", className: iconClass }) :
                         null,
@@ -252,6 +252,7 @@ exports.FloatingActionButton.propTypes = {
     accessKey: PropTypes.string,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: kendo_react_common_1.svgIconPropType,
     iconClass: PropTypes.string,
     text: PropTypes.string,
     alignOffset: PropTypes.shape({