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

package/dist/es/config/toolsSettings.js

@@ -19,6 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { keys, messages } from './../messages';
+import { alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRemoveIcon, alignRightIcon, boldIcon, cellsMergeIcon, cellSplitHorizontallyIcon, clearCssIcon, codeIcon, dropletIcon, fileAddIcon, filePdfIcon, foregroundColorIcon, imageIcon, indentIcon, italicIcon, linkIcon, listOrderedIcon, listUnorderedIcon, outdentIcon, printIcon, redoIcon, searchIcon, selectAllIcon, strikethroughIcon, subscriptIcon, supscriptIcon, tableAddIcon, tableColumnDeleteIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableDeleteIcon, tableRowDeleteIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, underlineIcon, undoIcon, unlinkIcon } from '@progress/kendo-svg-icons';
 import { bold as boldSettings, italic as italicSettings, underline as underlineSettings, strikethrough as strikethroughSettings, subscript as subscriptSettings, superscript as superscriptSettings, link as linkSettings, alignLeftRules, alignRightRules, alignCenterRules, alignJustifyRules, alignRemoveRules, indentRules, outdentRules } from '@progress/kendo-editor-common';
 /**
  * @hidden
@@ -38,43 +39,43 @@ export var EditorToolsSettings;
     /**
      * The object of the Bold tool settings.
      */
-    EditorToolsSettings.bold = __assign(__assign({}, boldSettings), { props: __assign({ icon: 'bold' }, buttonCommonProps), messages: {
+    EditorToolsSettings.bold = __assign(__assign({}, boldSettings), { props: __assign({ icon: 'bold', svgIcon: boldIcon }, buttonCommonProps), messages: {
             title: keys.bold
         }, commandName: 'Bold' });
     /**
      * The object of the Italic tool settings.
      */
-    EditorToolsSettings.italic = __assign(__assign({}, italicSettings), { props: __assign({ icon: 'italic' }, buttonCommonProps), messages: {
+    EditorToolsSettings.italic = __assign(__assign({}, italicSettings), { props: __assign({ icon: 'italic', svgIcon: italicIcon }, buttonCommonProps), messages: {
             title: keys.italic
         }, commandName: 'Italic' });
     /**
      * The object of the Underline tool settings.
      */
-    EditorToolsSettings.underline = __assign(__assign({}, underlineSettings), { props: __assign({ icon: 'underline' }, buttonCommonProps), messages: {
+    EditorToolsSettings.underline = __assign(__assign({}, underlineSettings), { props: __assign({ icon: 'underline', svgIcon: underlineIcon }, buttonCommonProps), messages: {
             title: keys.underline
         }, commandName: 'Underline' });
     /**
      * The object of the Strikethrough tool settings.
      */
-    EditorToolsSettings.strikethrough = __assign(__assign({}, strikethroughSettings), { props: __assign({ icon: 'strikethrough' }, buttonCommonProps), messages: {
+    EditorToolsSettings.strikethrough = __assign(__assign({}, strikethroughSettings), { props: __assign({ icon: 'strikethrough', svgIcon: strikethroughIcon }, buttonCommonProps), messages: {
             title: keys.strikethrough
         }, commandName: 'Strikethrough' });
     /**
      * The object of the Subscript tool settings.
      */
-    EditorToolsSettings.subscript = __assign(__assign({}, subscriptSettings), { props: __assign({ icon: 'subscript' }, buttonCommonProps), messages: {
+    EditorToolsSettings.subscript = __assign(__assign({}, subscriptSettings), { props: __assign({ icon: 'subscript', svgIcon: subscriptIcon }, buttonCommonProps), messages: {
             title: keys.subscript
         }, commandName: 'Subscript' });
     /**
      * The object of the Superscript tool settings.
      */
-    EditorToolsSettings.superscript = __assign(__assign({}, superscriptSettings), { props: __assign({ icon: 'superscript' }, buttonCommonProps), messages: {
+    EditorToolsSettings.superscript = __assign(__assign({}, superscriptSettings), { props: __assign({ icon: 'supscript', svgIcon: supscriptIcon }, buttonCommonProps), messages: {
             title: keys.superscript
         }, commandName: 'Superscript' });
     /**
      * The object of the Link tool settings.
      */
-    EditorToolsSettings.link = __assign(__assign({}, linkSettings), { props: __assign({ icon: 'link-horizontal' }, buttonCommonProps), messages: {
+    EditorToolsSettings.link = __assign(__assign({}, linkSettings), { props: __assign({ icon: 'link', svgIcon: linkIcon }, buttonCommonProps), messages: {
             insertHyperlink: keys.insertHyperlink,
             insertHyperlinkDialogTitle: keys.insertHyperlinkDialogTitle,
             insertHyperlinkAddress: keys.insertHyperlinkAddress,
@@ -86,7 +87,7 @@ export var EditorToolsSettings;
     /**
      * The object of the Link tool settings.
      */
-    EditorToolsSettings.insertFile = __assign(__assign({}, linkSettings), { props: __assign({ icon: 'file-add' }, buttonCommonProps), messages: {
+    EditorToolsSettings.insertFile = __assign(__assign({}, linkSettings), { props: __assign({ icon: 'file-add', svgIcon: fileAddIcon }, buttonCommonProps), messages: {
             insertHyperlink: keys.insertFile,
             insertHyperlinkDialogTitle: keys.insertFileDialogTitle,
             insertHyperlinkAddress: keys.insertFileAddress,
@@ -99,7 +100,7 @@ export var EditorToolsSettings;
      * The object of the InsertTable tool settings.
      */
     EditorToolsSettings.insertTable = {
-        props: __assign({ icon: 'table-insert' }, buttonCommonProps),
+        props: __assign({ icon: 'table-add', svgIcon: tableAddIcon }, buttonCommonProps),
         messages: {
             createTable: keys.createTable,
             createTableHint: keys.createTableHint
@@ -110,7 +111,7 @@ export var EditorToolsSettings;
      * The object of the AddRowBefore tool settings.
      */
     EditorToolsSettings.addRowBefore = {
-        props: __assign({ icon: 'table-row-insert-above' }, buttonCommonProps),
+        props: __assign({ icon: 'table-row-insert-above', svgIcon: tableRowInsertAboveIcon }, buttonCommonProps),
         messages: {
             title: keys.addRowBefore
         },
@@ -120,7 +121,7 @@ export var EditorToolsSettings;
      * The object of the AddRowAfter tool settings.
      */
     EditorToolsSettings.addRowAfter = {
-        props: __assign({ icon: 'table-row-insert-below' }, buttonCommonProps),
+        props: __assign({ icon: 'table-row-insert-below', svgIcon: tableRowInsertBelowIcon }, buttonCommonProps),
         messages: {
             title: keys.addRowAfter
         },
@@ -130,7 +131,7 @@ export var EditorToolsSettings;
      * The object of the AddColumnBefore tool settings.
      */
     EditorToolsSettings.addColumnBefore = {
-        props: __assign({ icon: 'table-column-insert-left' }, buttonCommonProps),
+        props: __assign({ icon: 'table-column-insert-left', svgIcon: tableColumnInsertLeftIcon }, buttonCommonProps),
         messages: {
             title: keys.addColumnBefore
         },
@@ -140,7 +141,7 @@ export var EditorToolsSettings;
      * The object of the AddColumnAfter tool settings.
      */
     EditorToolsSettings.addColumnAfter = {
-        props: __assign({ icon: 'table-column-insert-right' }, buttonCommonProps),
+        props: __assign({ icon: 'table-column-insert-right', svgIcon: tableColumnInsertRightIcon }, buttonCommonProps),
         messages: {
             title: keys.addColumnAfter
         },
@@ -150,7 +151,7 @@ export var EditorToolsSettings;
      * The object of the DeleteRow tool settings.
      */
     EditorToolsSettings.deleteRow = {
-        props: __assign({ icon: 'table-row-delete' }, buttonCommonProps),
+        props: __assign({ icon: 'table-row-delete', svgIcon: tableRowDeleteIcon }, buttonCommonProps),
         messages: {
             title: keys.deleteRow
         },
@@ -160,7 +161,7 @@ export var EditorToolsSettings;
      * The object of the DeleteColumn tool settings.
      */
     EditorToolsSettings.deleteColumn = {
-        props: __assign({ icon: 'table-column-delete' }, buttonCommonProps),
+        props: __assign({ icon: 'table-column-delete', svgIcon: tableColumnDeleteIcon }, buttonCommonProps),
         messages: {
             title: keys.deleteColumn
         },
@@ -170,7 +171,7 @@ export var EditorToolsSettings;
      * The object of the DeleteTable tool settings.
      */
     EditorToolsSettings.deleteTable = {
-        props: __assign({ icon: 'table-delete' }, buttonCommonProps),
+        props: __assign({ icon: 'table-delete', svgIcon: tableDeleteIcon }, buttonCommonProps),
         messages: {
             title: keys.deleteTable
         },
@@ -180,7 +181,7 @@ export var EditorToolsSettings;
      * The object of the MergeCells tool settings.
      */
     EditorToolsSettings.mergeCells = {
-        props: __assign({ icon: 'cells-merge' }, buttonCommonProps),
+        props: __assign({ icon: 'cells-merge', svgIcon: cellsMergeIcon }, buttonCommonProps),
         messages: {
             title: keys.mergeCells
         },
@@ -190,7 +191,7 @@ export var EditorToolsSettings;
      * The object of the SplitCell tool settings.
      */
     EditorToolsSettings.splitCell = {
-        props: __assign({ icon: 'cell-split-horizontally' }, buttonCommonProps),
+        props: __assign({ icon: 'cell-split-horizontally', svgIcon: cellSplitHorizontallyIcon }, buttonCommonProps),
         messages: {
             title: keys.splitCell
         },
@@ -200,7 +201,7 @@ export var EditorToolsSettings;
      * The object of the Print tool settings.
      */
     EditorToolsSettings.print = {
-        props: __assign({ icon: 'print' }, buttonCommonProps),
+        props: __assign({ icon: 'print', svgIcon: printIcon }, buttonCommonProps),
         messages: {
             title: keys.print
         }
@@ -209,7 +210,7 @@ export var EditorToolsSettings;
      * The object of the Print tool settings.
      */
     EditorToolsSettings.selectAll = {
-        props: __assign({ icon: 'select-all' }, buttonCommonProps),
+        props: __assign({ icon: 'select-all', svgIcon: selectAllIcon }, buttonCommonProps),
         messages: {
             title: keys.selectAll
         }
@@ -218,7 +219,7 @@ export var EditorToolsSettings;
      * The object of the Print tool settings.
      */
     EditorToolsSettings.pdf = {
-        props: __assign({ icon: 'pdf' }, buttonCommonProps),
+        props: __assign({ icon: 'file-pdf', svgIcon: filePdfIcon }, buttonCommonProps),
         messages: {
             title: keys.pdf
         }
@@ -241,7 +242,7 @@ export var EditorToolsSettings;
      * The object of the CleanFormatting tool settings.
      */
     EditorToolsSettings.cleanFormatting = {
-        props: __assign({ icon: 'clear-css' }, buttonCommonProps),
+        props: __assign({ icon: 'clear-css', svgIcon: clearCssIcon }, buttonCommonProps),
         messages: {
             title: keys.cleanFormatting
         },
@@ -252,7 +253,7 @@ export var EditorToolsSettings;
      */
     EditorToolsSettings.image = {
         node: 'image',
-        props: __assign({ icon: 'image' }, buttonCommonProps),
+        props: __assign({ icon: 'image', svgIcon: imageIcon }, buttonCommonProps),
         messages: {
             insertImage: keys.insertImage,
             insertImageDialogTitle: keys.insertImageDialogTitle,
@@ -270,7 +271,7 @@ export var EditorToolsSettings;
      * The object of the ViewHtml tool settings.
      */
     EditorToolsSettings.viewHtml = {
-        props: __assign({ icon: 'html' }, buttonCommonProps),
+        props: __assign({ icon: 'code', svgIcon: codeIcon }, buttonCommonProps),
         messages: {
             viewHtml: keys.viewHtml,
             viewHtmlDialogTitle: keys.viewHtmlDialogTitle,
@@ -283,7 +284,7 @@ export var EditorToolsSettings;
      * The object of the Find and Replace tool settings.
      */
     EditorToolsSettings.findAndReplace = {
-        props: __assign({ icon: 'find' }, buttonCommonProps),
+        props: __assign({ icon: 'find', svgIcon: searchIcon }, buttonCommonProps),
         messages: {
             findReplaceToolTitle: keys.findReplaceToolTitle,
             findReplaceDialogTitle: keys.findReplaceDialogTitle,
@@ -305,14 +306,14 @@ export var EditorToolsSettings;
     /**
      * The object of the Unlink tool settings.
      */
-    EditorToolsSettings.unlink = __assign(__assign({}, linkSettings), { props: __assign({ icon: 'unlink-horizontal' }, buttonCommonProps), messages: {
+    EditorToolsSettings.unlink = __assign(__assign({}, linkSettings), { props: __assign({ icon: 'unlink', svgIcon: unlinkIcon }, buttonCommonProps), messages: {
             title: keys.unlink
         }, commandName: 'Unlink' });
     /**
      * The object of the Undo tool settings.
      */
     EditorToolsSettings.undo = {
-        props: __assign({ icon: 'undo' }, buttonCommonProps),
+        props: __assign({ icon: 'undo', svgIcon: undoIcon }, buttonCommonProps),
         messages: {
             title: keys.undo
         },
@@ -322,7 +323,7 @@ export var EditorToolsSettings;
      * The object of the Redo tool settings.
      */
     EditorToolsSettings.redo = {
-        props: __assign({ icon: 'redo' }, buttonCommonProps),
+        props: __assign({ icon: 'redo', svgIcon: redoIcon }, buttonCommonProps),
         messages: {
             title: keys.redo
         },
@@ -396,6 +397,7 @@ export var EditorToolsSettings;
         style: 'color',
         colorPickerProps: {
             icon: 'foreground-color',
+            svgIcon: foregroundColorIcon,
             view: 'palette',
             title: keys.foregroundColor
         },
@@ -407,7 +409,8 @@ export var EditorToolsSettings;
     EditorToolsSettings.backColor = {
         style: 'background-color',
         colorPickerProps: {
-            icon: 'background',
+            icon: 'droplet',
+            svgIcon: dropletIcon,
             view: 'palette',
             title: keys.backgroundColor
         },
@@ -418,7 +421,7 @@ export var EditorToolsSettings;
      */
     EditorToolsSettings.alignLeft = {
         actions: __spreadArray([], alignLeftRules, true),
-        props: __assign({ icon: 'align-left' }, buttonCommonProps),
+        props: __assign({ icon: 'align-left', svgIcon: alignLeftIcon }, buttonCommonProps),
         messages: {
             title: keys.alignLeft
         },
@@ -429,7 +432,7 @@ export var EditorToolsSettings;
      */
     EditorToolsSettings.alignRight = {
         actions: __spreadArray([], alignRightRules, true),
-        props: __assign({ icon: 'align-right' }, buttonCommonProps),
+        props: __assign({ icon: 'align-right', svgIcon: alignRightIcon }, buttonCommonProps),
         messages: {
             title: keys.alignRight
         },
@@ -440,7 +443,7 @@ export var EditorToolsSettings;
      */
     EditorToolsSettings.alignCenter = {
         actions: __spreadArray([], alignCenterRules, true),
-        props: __assign({ icon: 'align-center' }, buttonCommonProps),
+        props: __assign({ icon: 'align-center', svgIcon: alignCenterIcon }, buttonCommonProps),
         messages: {
             title: keys.alignCenter
         },
@@ -451,7 +454,7 @@ export var EditorToolsSettings;
      */
     EditorToolsSettings.alignJustify = {
         actions: __spreadArray([], alignJustifyRules, true),
-        props: __assign({ icon: 'align-justify' }, buttonCommonProps),
+        props: __assign({ icon: 'align-justify', svgIcon: alignJustifyIcon }, buttonCommonProps),
         messages: {
             title: keys.alignJustify
         },
@@ -462,7 +465,7 @@ export var EditorToolsSettings;
      */
     EditorToolsSettings.alignRemove = {
         actions: __spreadArray([], alignRemoveRules, true),
-        props: __assign({ icon: 'align-remove' }, buttonCommonProps),
+        props: __assign({ icon: 'align-remove', svgIcon: alignRemoveIcon }, buttonCommonProps),
         messages: {},
         commandName: 'AlignRemove'
     };
@@ -472,7 +475,7 @@ export var EditorToolsSettings;
     EditorToolsSettings.indent = {
         actions: indentRules.nodes,
         listsTypes: listsTypes,
-        props: __assign({ icon: 'indent-increase' }, buttonCommonProps),
+        props: __assign({ icon: 'indent', svgIcon: indentIcon }, buttonCommonProps),
         messages: {
             title: keys.indent
         },
@@ -484,7 +487,7 @@ export var EditorToolsSettings;
     EditorToolsSettings.outdent = {
         actions: outdentRules.nodes,
         listsTypes: listsTypes,
-        props: __assign({ icon: 'indent-decrease' }, buttonCommonProps),
+        props: __assign({ icon: 'outdent', svgIcon: outdentIcon }, buttonCommonProps),
         messages: {
             title: keys.outdent
         },
@@ -495,7 +498,7 @@ export var EditorToolsSettings;
      */
     EditorToolsSettings.orderedList = {
         listType: listsTypes.orderedList,
-        props: __assign({ icon: 'list-ordered' }, buttonCommonProps),
+        props: __assign({ icon: 'list-ordered', svgIcon: listOrderedIcon }, buttonCommonProps),
         messages: {
             title: keys.orderedList
         },
@@ -507,7 +510,7 @@ export var EditorToolsSettings;
      */
     EditorToolsSettings.bulletList = {
         listType: listsTypes.bulletList,
-        props: __assign({ icon: 'list-unordered' }, buttonCommonProps),
+        props: __assign({ icon: 'list-unordered', svgIcon: listUnorderedIcon }, buttonCommonProps),
         messages: {
             title: keys.bulletList
         },

package/dist/es/dialogs/FindReplace.js

@@ -33,9 +33,10 @@ import { messages } from './../messages';
 import { EditorToolsSettings } from './../config/toolsSettings';
 import { formatString } from './../tools/utils';
 import { find, replace, replaceAll, findAll, TextSelection, textHighlightKey, selectedLineTextOnly } from '@progress/kendo-editor-common';
-import { Icon } from '@progress/kendo-react-common';
+import { IconWrap } from '@progress/kendo-react-common';
 import { Input, Checkbox } from '@progress/kendo-react-inputs';
 import { Form, FormElement, FieldWrapper } from '@progress/kendo-react-form';
+import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 var enter = 13, esc = 27;
 var settings = EditorToolsSettings.findAndReplace;
 /**
@@ -210,12 +211,12 @@ var FindAndReplaceDialog = /** @class */ (function (_super) {
                 React.createElement("label", { htmlFor: "regular-expression", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceUseRegExp, messages[findReplaceUseRegExp])))));
         var navigation = (React.createElement("div", { className: "k-matches-container" },
             React.createElement(Button, { fillMode: 'flat', themeColor: 'primary', onClick: this.onFindPrev },
-                React.createElement(Icon, { name: "chevron-left" }),
+                React.createElement(IconWrap, { name: "chevron-left", icon: chevronLeftIcon }),
                 localization.toLanguageString(findReplacePrevMatch, messages[findReplacePrevMatch])),
             React.createElement("span", null, this.matchesMessage(localization.toLanguageString(findReplaceMatches, messages[findReplaceMatches]))),
             React.createElement(Button, { fillMode: 'flat', themeColor: 'primary', onClick: this.onFindNext },
                 localization.toLanguageString(findReplaceNextMatch, messages[findReplaceNextMatch]),
-                React.createElement(Icon, { name: "chevron-right" }))));
+                React.createElement(IconWrap, { name: "chevron-right", icon: chevronRightIcon }))));
         var findWhat = (React.createElement(Form, { render: function () { return (React.createElement(FormElement, { horizontal: true },
                 React.createElement(FieldWrapper, null,
                     React.createElement("label", { htmlFor: "findWhat", className: 'k-form-label' }, localization.toLanguageString(findReplaceFindWhat, messages[findReplaceFindWhat])),

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673300890,
+    publishDate: 1673444941,
     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/es/tools/lists-styled.js

@@ -76,5 +76,5 @@ export var ListTool = function (props) {
         items = items.map(function (item, index) { return (__assign(__assign({}, item), { selected: listStyleType_1 ? item.style === listStyleType_1 : index === 0 })); });
     }
     return (React.createElement("span", { onMouseDown: function (e) { e.preventDefault(); } },
-        React.createElement(SplitButton, { textField: "text", items: items, icon: props.icon, onButtonClick: onButtonClick, onItemClick: onItemClick, buttonClass: isActive ? 'k-selected' : undefined, title: props.title !== undefined ? props.title : localization.toLanguageString(props.titleKey, messages[props.titleKey]) })));
+        React.createElement(SplitButton, { textField: "text", items: items, icon: props.icon, svgIcon: props.svgIcon, onButtonClick: onButtonClick, onItemClick: onItemClick, buttonClass: isActive ? 'k-selected' : undefined, title: props.title !== undefined ? props.title : localization.toLanguageString(props.titleKey, messages[props.titleKey]) })));
 };

package/dist/es/tools/main.js

@@ -47,6 +47,7 @@ import { SelectAll as SelectAllTool } from './selectAll';
 import { CleanFormatting as CleanFormattingTool } from './cleanFormatting';
 import { FindAndReplace as FindAndReplaceTool } from './findReplace';
 import { ListTool } from './lists-styled';
+import { listLatinBigIcon, listLatinSmallIcon, listOrderedIcon, listRomanLowerIcon, listRomanUpperIcon, listUnorderedIcon, listUnorderedOutlineIcon, listUnorderedSquareIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents a wrapping namespace for the tool components, props, and functions of the Editor.
  */
@@ -413,11 +414,11 @@ export var EditorTools;
      */
     EditorTools.BulletedList = function (props) {
         var ulItems = [
-            { icon: 'list-unordered', text: 'Disc', style: 'disc' },
-            { icon: 'list-unordered-outline', text: 'Circle', style: 'circle' },
-            { icon: 'list-unordered-square', text: 'Square', style: 'square' }
+            { icon: 'list-unordered', svgIcon: listUnorderedIcon, text: 'Disc', style: 'disc' },
+            { icon: 'list-unordered-outline', svgIcon: listUnorderedOutlineIcon, text: 'Circle', style: 'circle' },
+            { icon: 'list-unordered-square', svgIcon: listUnorderedSquareIcon, text: 'Square', style: 'square' }
         ];
-        return (React.createElement(ListTool, __assign({ listType: EditorToolsSettings.bulletList.listType, items: ulItems, icon: "list-unordered", titleKey: EditorToolsSettings.bulletList.messages.title }, props)));
+        return (React.createElement(ListTool, __assign({ listType: EditorToolsSettings.bulletList.listType, items: ulItems, icon: "list-unordered", svgIcon: listUnorderedIcon, titleKey: EditorToolsSettings.bulletList.messages.title }, props)));
     };
     /**
      * The NumberedList tool component.
@@ -425,14 +426,14 @@ export var EditorTools;
      */
     EditorTools.NumberedList = function (props) {
         var olItems = [
-            { icon: 'list-ordered', text: 'Decimal' },
+            { icon: 'list-ordered', svgIcon: listOrderedIcon, text: 'Decimal' },
             // { icon: 'list-leading-zero', text: 'Decimal with leading zero', styleType: 'decimal-leading-zero' },
-            { icon: 'list-roman-upper', text: 'Upper roman', style: 'upper-roman' },
-            { icon: 'list-roman-lower', text: 'Lower roman', style: 'lower-roman' },
-            { icon: 'list-latin-big', text: 'Upper latin', style: 'upper-latin' },
-            { icon: 'list-latin-small', text: 'Lower latin', style: 'lower-latin' }
+            { icon: 'list-roman-upper', svgIcon: listRomanUpperIcon, text: 'Upper roman', style: 'upper-roman' },
+            { icon: 'list-roman-lower', svgIcon: listRomanLowerIcon, text: 'Lower roman', style: 'lower-roman' },
+            { icon: 'list-latin-big', svgIcon: listLatinBigIcon, text: 'Upper latin', style: 'upper-latin' },
+            { icon: 'list-latin-small', svgIcon: listLatinSmallIcon, text: 'Lower latin', style: 'lower-latin' }
         ];
-        return (React.createElement(ListTool, __assign({ listType: EditorToolsSettings.orderedList.listType, items: olItems, icon: "list-ordered", titleKey: EditorToolsSettings.orderedList.messages.title }, props)));
+        return (React.createElement(ListTool, __assign({ listType: EditorToolsSettings.orderedList.listType, items: olItems, icon: "list-ordered", svgIcon: listOrderedIcon, titleKey: EditorToolsSettings.orderedList.messages.title }, props)));
     };
     /**
      * Creates the Outdent tool component of the Editor.