From deee687e577b8fd19dedb7924763a4e4391a6a91 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Mon, 23 Nov 2020 14:40:52 +0300
Subject: [PATCH] [DE mobile] Add styles and icons

---
 .../mobile/resources/less/common-ios.less     | 148 ++++++++++++++
 .../mobile/src/css/icons-ios.less             | 182 ++++++++++++++++++
 .../mobile/src/css/icons-material.less        | 115 +++++++++++
 .../mobile/src/view/edit/Edit.jsx             |   6 +-
 .../mobile/src/view/edit/EditChart.jsx        |  46 +++--
 .../mobile/src/view/edit/EditHeader.jsx       |   4 +-
 .../mobile/src/view/edit/EditHyperlink.jsx    |   2 +-
 .../mobile/src/view/edit/EditImage.jsx        |  68 +++++--
 .../mobile/src/view/edit/EditParagraph.jsx    |  12 +-
 .../mobile/src/view/edit/EditShape.jsx        |  62 ++++--
 .../mobile/src/view/edit/EditTable.jsx        |  54 ++++--
 .../mobile/src/view/edit/EditText.jsx         |  38 ++--
 .../src/view/settings/DocumentSettings.jsx    |  16 +-
 13 files changed, 657 insertions(+), 96 deletions(-)

diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less
index 332d7f089..273b3e04d 100644
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/apps/common/mobile/resources/less/common-ios.less
@@ -3,6 +3,8 @@
 @black: #000000;
 
 .device-ios {
+    @blockTitleColor: #6d6d72;
+
     --f7-navbar-link-color: @themeColor;
     --f7-navbar-text-color: @black;
     --f7-navbar-title-line-height: 44px;
@@ -12,6 +14,12 @@
     --f7-list-bg-color: @white;
     --f7-navbar-bg-color: #f7f7f8;
 
+    --f7-radio-active-color: @themeColor;
+    --f7-toggle-active-color: @themeColor;
+    --f7-range-bar-active-bg-color: @themeColor;
+
+    --f7-list-button-text-color: @themeColor;
+
     // Main Toolbar
     #editor-navbar.navbar .right a + a,
     #editor-navbar.navbar .left a + a {
@@ -23,6 +31,9 @@
         .title {
             font-weight: 600;
         }
+        .navbar-inner {
+            z-index: auto;
+        }
     }
 
     .popover__titled {
@@ -146,4 +157,141 @@
             }
         }
     }
+
+    .list {
+        li.no-indicator {
+            .item-link {
+                .item-inner:before {
+                    content: none;
+                }
+            }
+        }
+        .item-inner {
+            padding-top: 7px;
+            .item-after {
+                color: @black;
+                .after-start {
+                    margin: 0 5px;
+                }
+                .segmented {
+                    min-width: 90px;
+                    margin-left: 10px;
+                }
+            }
+        }
+        .buttons {
+            .item-inner {
+                padding-top: 0;
+                padding-bottom: 0;
+                align-items: stretch;
+                > .row {
+                    width: 100%;
+                    align-items: stretch;
+                    .button {
+                        flex: 1;
+                        border: none;
+                        height: inherit;
+                        border-radius: 0;
+                        font-size: 17px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+    }
+
+    .tab-buttons {
+        width: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+        align-self: center;
+        .tab-link {
+            display: block;
+            width: 100%;
+            line-height: 26px;
+            position: relative;
+            overflow: hidden;
+            -webkit-box-flex: 1;
+            border: 1px solid @themeColor;
+            text-decoration: none;
+            text-align: center;
+            margin: 0;
+            padding: 0 1px;
+            height: 29px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: 14px;
+            font-family: inherit;
+            cursor: pointer;
+            outline: 0;
+            font-weight: 600;
+            &:first-child {
+                border-radius: 5px 0 0 5px;
+                border-left-width: 1px;
+                border-left-style: solid;
+            }
+            &:last-child {
+                border-radius: 0 5px 5px 0;
+            }
+            &.tab-link-active {
+                background: @themeColor;
+                color: @white;
+            }
+        }
+    }
+
+    .button {
+        border: 1px solid @themeColor;
+        color: @themeColor;
+        text-decoration: none;
+        text-align: center;
+        display: block;
+        border-radius: 5px;
+        line-height: 27px;
+        box-sizing: border-box;
+        background: 0 0;
+        padding: 0 10px;
+        margin: 0;
+        height: 29px;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        font-family: inherit;
+        cursor: pointer;
+        outline: 0;
+        &.active {
+            background: @themeColor;
+            color: @white;
+            i.icon {
+                background-color: @white;
+            }
+        }
+    }
+
+    .red .list-button {
+        color: red;
+    }
+
+    .block-title {
+        position: relative;
+        overflow: hidden;
+        margin: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        text-transform: uppercase;
+        line-height: 1;
+        color: @blockTitleColor;
+        margin: 35px 15px 10px;
+    }
+
+    .shapes {
+        .page-content {
+            background: @white;
+        }
+    }
 }
diff --git a/apps/documenteditor/mobile/src/css/icons-ios.less b/apps/documenteditor/mobile/src/css/icons-ios.less
index c37b0255c..1defd0a90 100644
--- a/apps/documenteditor/mobile/src/css/icons-ios.less
+++ b/apps/documenteditor/mobile/src/css/icons-ios.less
@@ -25,6 +25,11 @@
       height: 24px;
       .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M11.8,3l0.4,2c0.1,0.7,0.6,1.1,1.3,1.1c0.3,0,0.5-0.1,0.7-0.2l1.9-1.2l1.1,1.1l-1.1,1.8C15.8,8,15.8,8.5,16,8.9c0.2,0.4,0.5,0.7,1,0.8l2.1,0.5v1.6L17,12.2c-0.5,0.1-0.8,0.4-1,0.8c-0.2,0.4-0.1,0.9,0.1,1.2l1.2,1.9l-1.1,1.1l-1.8-1.1c-0.2-0.2-0.5-0.2-0.8-0.2c-0.6,0-1.2,0.5-1.3,1.1l-0.5,2.1h-1.6l-0.4-2C9.7,16.4,9.2,16,8.5,16c-0.3,0-0.5,0.1-0.7,0.2l-1.9,1.2l-1.1-1.1l1.1-1.8c0.3-0.4,0.3-0.9,0.1-1.3c-0.2-0.4-0.5-0.7-1-0.8l-2.1-0.5v-1.6l2-0.4c0.5-0.1,0.8-0.4,1-0.8C6.1,8.7,6,8.2,5.8,7.9l-1-2l1.1-1.1l1.8,1.1C8,6.1,8.2,6.2,8.5,6.2c0.6,0,1.2-0.5,1.3-1.1L10.3,3H11.8 M11,15.5c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5s-4.5,2-4.5,4.5S8.5,15.5,11,15.5 M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2c-0.1,0-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5c-0.1,0-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>');
     }
+    &.icon-expand-down {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M20.5,6.5l1.1,1.1L11,18l0,0l0,0L0.5,7.5l1.1-1.1l9.5,9.5L20.5,6.5z"/></g></svg>');
+    }
     //Settings
     &.icon-search {
       width: 22px;
@@ -66,5 +71,182 @@
       height: 22px;
       .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
     }
+    //Edit
+    &.icon-text-additional {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
+    }
+    &.icon-bullets {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
+    }
+    &.icon-numbers {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
+    }
+    &.icon-linespacing {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 	"/></g></svg>');
+    }
+    // Align
+    &.icon-text-align-left {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+    }
+    &.icon-text-align-right {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+    }
+    &.icon-text-align-center {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+    }
+    &.icon-text-align-just {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+    }
+    &.icon-de-indent {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
+    }
+    &.icon-in-indent {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
+    }
+    // Table
+    &.icon-table-add-column-left {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
+    }
+    &.icon-table-add-column-right {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
+    }
+    &.icon-table-add-row-above {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
+    }
+    &.icon-table-add-row-below {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
+    }
+    &.icon-table-remove-column {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+    }
+    &.icon-table-remove-row {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+    }
+    // Reorder
+    &.icon-move-backward {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>');
+    }
+    &.icon-move-forward {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>');
+    }
+    &.icon-move-background {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>');
+    }
+    &.icon-move-foreground {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
+    }
+    // Wrap
+    &.icon-wrap-inline {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><rect y="7" width="5" height="1"/><rect x="20" y="19" width="6" height="1"/><path d="M16.08,8.31c-1.69,1-2.82,3.91-2.82,3.91s-0.19.06-.07-0.22a0.33,0.33,0,0,0,0-.45l0.78-1.9A0.45,0.45,0,0,0,14,9.48a0.26,0.26,0,0,0,0-.23,0.24,0.24,0,0,0-.14.18,0.49,0.49,0,0,0,0,.19l-0.78,1.9a0.17,0.17,0,0,0-.11,0,0.25,0.25,0,0,1-.11,0l-0.78-1.9a0.47,0.47,0,0,0,0-.19,0.24,0.24,0,0,0-.14-0.18,0.26,0.26,0,0,0,0,.23,0.45,0.45,0,0,0,.1.17l0.78,1.91a0.32,0.32,0,0,0-.05.44c0.12,0.29-.07.22-0.07,0.22S11.57,9.29,9.88,8.31s-3.55-2-3.8-.53,0.23,1.42.37,2,0.28,2.34.76,2.75A6.19,6.19,0,0,0,9.62,13s-2.17,1.24-2.14,2,0.62,4.86,1.83,4.92,2-1.87,2.34-2.78a26.9,26.9,0,0,1,.93-2.84,8.39,8.39,0,0,1,.14,1.51c0.11,0.3.25,0.26,0.25,0.26s0.14,0,.25-0.26a8.39,8.39,0,0,1,.14-1.51,26.73,26.73,0,0,1,.93,2.84c0.34,0.92,1.13,2.84,2.34,2.78s1.8-4.18,1.83-4.92-2.14-2-2.14-2a6.19,6.19,0,0,0,2.42-.44c0.48-.41.62-2.13,0.76-2.75s0.62-.62.37-2S17.77,7.33,16.08,8.31Z"/></g></svg>');
+    }
+    &.icon-wrap-square {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><rect y="7" width="5" height="1"/><rect y="10" width="5" height="1"/><rect y="13" width="5" height="1"/><rect y="16" width="5" height="1"/><rect y="19" width="5" height="1"/><rect x="21" y="19" width="5" height="1"/><rect x="21" y="16" width="5" height="1"/><rect x="21" y="13" width="5" height="1"/><rect x="21" y="10" width="5" height="1"/><rect x="21" y="7" width="5" height="1"/><path d="M16.08,8.33c-1.69,1-2.82,3.91-2.82,3.91s-0.19.06-.07-0.22a0.33,0.33,0,0,0,0-.45l0.78-1.9A0.45,0.45,0,0,0,14,9.5a0.26,0.26,0,0,0,0-.23,0.24,0.24,0,0,0-.14.18,0.49,0.49,0,0,0,0,.19l-0.78,1.9a0.17,0.17,0,0,0-.11,0,0.25,0.25,0,0,1-.11,0l-0.78-1.9a0.47,0.47,0,0,0,0-.19,0.24,0.24,0,0,0-.14-0.18,0.26,0.26,0,0,0,0,.23,0.45,0.45,0,0,0,.1.17l0.78,1.91a0.32,0.32,0,0,0-.05.44c0.12,0.29-.07.22-0.07,0.22S11.57,9.3,9.88,8.33s-3.55-2-3.8-.53,0.23,1.42.37,2,0.28,2.34.76,2.75A6.19,6.19,0,0,0,9.62,13s-2.17,1.24-2.14,2,0.62,4.86,1.83,4.92,2-1.87,2.34-2.78a26.9,26.9,0,0,1,.93-2.84,8.39,8.39,0,0,1,.14,1.51c0.11,0.3.25,0.26,0.25,0.26s0.14,0,.25-0.26a8.39,8.39,0,0,1,.14-1.51,26.73,26.73,0,0,1,.93,2.84c0.34,0.92,1.13,2.84,2.34,2.78s1.8-4.18,1.83-4.92-2.14-2-2.14-2a6.19,6.19,0,0,0,2.42-.44c0.48-.41.62-2.13,0.76-2.75s0.62-.62.37-2S17.77,7.35,16.08,8.33Z"/></g></svg>');
+    }
+    &.icon-wrap-tight {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><rect y="7" width="5" height="1"/><rect y="10" width="5" height="1"/><rect y="13" width="6" height="1"/><rect y="16" width="6" height="1"/><rect y="19" width="7" height="1"/><rect x="19" y="19" width="7" height="1"/><rect x="12" y="19" width="2" height="1"/><rect x="20" y="16" width="6" height="1"/><rect x="20" y="13" width="6" height="1"/><rect x="21" y="10" width="5" height="1"/><rect x="21" y="7" width="5" height="1"/><rect x="11" y="7" width="4" height="1"/><path d="M16.07,8.3c-1.69,1-2.82,3.91-2.82,3.91s-0.19.06-.07-0.22a0.33,0.33,0,0,0,0-.45l0.78-1.9A0.45,0.45,0,0,0,14,9.47a0.26,0.26,0,0,0,0-.23,0.24,0.24,0,0,0-.14.18,0.49,0.49,0,0,0,0,.19l-0.78,1.9a0.17,0.17,0,0,0-.11,0,0.25,0.25,0,0,1-.11,0L12.08,9.61a0.47,0.47,0,0,0,0-.19,0.24,0.24,0,0,0-.14-0.18,0.26,0.26,0,0,0,0,.23,0.45,0.45,0,0,0,.1.17l0.78,1.91a0.32,0.32,0,0,0-.05.44c0.12,0.29-.07.22-0.07,0.22S11.56,9.28,9.87,8.3s-3.55-2-3.8-.53,0.23,1.42.37,2,0.28,2.34.76,2.76A6.17,6.17,0,0,0,9.62,13s-2.17,1.25-2.14,2,0.62,4.86,1.83,4.92,2-1.87,2.34-2.79a27,27,0,0,1,.93-2.85,8.41,8.41,0,0,1,.14,1.51c0.11,0.3.25,0.26,0.25,0.26s0.14,0,.25-0.26a8.41,8.41,0,0,1,.14-1.51,26.81,26.81,0,0,1,.93,2.85c0.34,0.92,1.13,2.85,2.34,2.79s1.8-4.18,1.83-4.92-2.14-2-2.14-2a6.17,6.17,0,0,0,2.42-.44c0.48-.42.62-2.13,0.76-2.76s0.62-.62.37-2S17.76,7.32,16.07,8.3Z"/></g></svg>');
+    }
+    &.icon-wrap-through {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><rect y="7" width="5" height="1"/><rect y="10" width="5" height="1"/><rect y="13" width="6" height="1"/><rect y="16" width="6" height="1"/><rect y="19" width="7" height="1"/><rect x="19" y="19" width="7" height="1"/><rect x="20" y="16" width="6" height="1"/><rect x="20" y="13" width="6" height="1"/><rect x="21" y="10" width="5" height="1"/><rect x="21" y="7" width="5" height="1"/><path d="M16.09,8.31c-1.68,1-2.8,3.93-2.8,3.93s-0.19.06-.07-0.22a0.33,0.33,0,0,0,0-.45l0.77-1.91A0.46,0.46,0,0,0,14,9.49a0.26,0.26,0,0,0,0-.23,0.24,0.24,0,0,0-.14.18,0.49,0.49,0,0,0,0,.2l-0.77,1.91a0.17,0.17,0,0,0-.11,0,0.25,0.25,0,0,1-.11,0L12.12,9.64a0.48,0.48,0,0,0,0-.2,0.24,0.24,0,0,0-.14-0.18,0.26,0.26,0,0,0,0,.23,0.46,0.46,0,0,0,.1.17l0.78,1.92a0.32,0.32,0,0,0-.05.44c0.12,0.29-.07.22-0.07,0.22S11.61,9.3,9.93,8.31s-3.53-2-3.78-.54,0.22,1.43.36,2.05,0.28,2.35.76,2.77A6.08,6.08,0,0,0,9.68,13S7.52,14.3,7.55,15,8.17,19.92,9.37,20s2-1.88,2.32-2.8a27.27,27.27,0,0,1,.92-2.86,8.53,8.53,0,0,1,.14,1.52c0.11,0.3.25,0.26,0.25,0.26s0.14,0,.25-0.26a8.53,8.53,0,0,1,.14-1.52,27.09,27.09,0,0,1,.92,2.86c0.34,0.92,1.12,2.86,2.32,2.8s1.79-4.2,1.82-4.94-2.13-2-2.13-2a6.08,6.08,0,0,0,2.41-.45c0.48-.42.62-2.14,0.76-2.77s0.62-.62.36-2.05S17.77,7.33,16.09,8.31Z"/></g></svg>');
+    }
+    &.icon-wrap-top-bottom {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><path d="M16.08,8.3c-1.68,1-2.8,3.91-2.8,3.91s-0.19.06-.07-0.22a0.33,0.33,0,0,0,0-.45l0.77-1.9A0.45,0.45,0,0,0,14,9.47a0.26,0.26,0,0,0,0-.23,0.24,0.24,0,0,0-.14.18,0.49,0.49,0,0,0,0,.19l-0.77,1.9a0.17,0.17,0,0,0-.11,0,0.25,0.25,0,0,1-.11,0L12.12,9.61a0.48,0.48,0,0,0,0-.19,0.24,0.24,0,0,0-.14-0.18,0.26,0.26,0,0,0,0,.23,0.45,0.45,0,0,0,.1.17l0.78,1.91a0.32,0.32,0,0,0,0,.44c0.12,0.29-.07.22-0.07,0.22S11.6,9.28,9.92,8.3s-3.52-2-3.77-.53,0.22,1.42.36,2,0.28,2.34.76,2.76a6.08,6.08,0,0,0,2.4.44s-2.15,1.25-2.12,2,0.61,4.86,1.82,4.92,2-1.87,2.32-2.79a27.11,27.11,0,0,1,.92-2.85,8.47,8.47,0,0,1,.14,1.51c0.11,0.3.25,0.26,0.25,0.26s0.14,0,.25-0.26a8.47,8.47,0,0,1,.14-1.51,26.94,26.94,0,0,1,.92,2.85c0.34,0.92,1.12,2.85,2.32,2.79s1.79-4.18,1.82-4.92-2.12-2-2.12-2a6.08,6.08,0,0,0,2.4-.44c0.48-.42.62-2.13,0.76-2.76s0.61-.62.36-2S17.75,7.32,16.08,8.3Z"/></g></svg>');
+    }
+    &.icon-wrap-infront {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" y="1" width="26" height="1"/><rect opacity="0.3" y="4" width="26" height="1"/><rect opacity="0.3" y="25" width="26" height="1"/><rect opacity="0.3" y="22" width="26" height="1"/><rect opacity="0.3" y="7" width="26" height="1"/><rect opacity="0.3" y="10" width="26" height="1"/><rect opacity="0.3" y="13" width="26" height="1"/><rect opacity="0.3" y="16" width="26" height="1"/><rect opacity="0.3" y="19" width="26" height="1"/><path d="M16.08,8.29c-1.69,1-2.82,3.93-2.82,3.93s-0.19.06-.07-0.22a0.33,0.33,0,0,0,0-.45l0.78-1.91A0.46,0.46,0,0,0,14,9.47a0.26,0.26,0,0,0,0-.23,0.25,0.25,0,0,0-.14.18,0.49,0.49,0,0,0,0,.2l-0.78,1.9a0.17,0.17,0,0,0-.11,0,0.25,0.25,0,0,1-.11,0L12.09,9.61a0.48,0.48,0,0,0,0-.2,0.24,0.24,0,0,0-.14-0.18,0.26,0.26,0,0,0,0,.23,0.46,0.46,0,0,0,.1.17l0.78,1.92a0.32,0.32,0,0,0-.05.44c0.12,0.29-.07.22-0.07,0.22S11.57,9.27,9.88,8.29s-3.55-2-3.8-.54,0.23,1.43.37,2.05,0.28,2.35.76,2.77A6.16,6.16,0,0,0,9.62,13s-2.17,1.25-2.14,2S8.1,19.89,9.31,20s2-1.87,2.34-2.8a27.1,27.1,0,0,1,.93-2.86,8.46,8.46,0,0,1,.14,1.52c0.11,0.3.25,0.26,0.25,0.26s0.14,0,.25-0.26a8.46,8.46,0,0,1,.14-1.52,26.92,26.92,0,0,1,.93,2.86c0.34,0.92,1.13,2.86,2.34,2.8s1.8-4.19,1.83-4.94-2.14-2-2.14-2a6.16,6.16,0,0,0,2.42-.45c0.48-.42.62-2.14,0.76-2.77s0.62-.62.37-2.05S17.77,7.31,16.08,8.29Z"/></g></svg>');
+    }
+    &.icon-wrap-behind {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M16.07,8.34c-1.68,1-2.8,3.91-2.8,3.91s-0.19.06-.07-0.22a0.33,0.33,0,0,0,0-.45l0.77-1.9A0.45,0.45,0,0,0,14,9.51a0.26,0.26,0,0,0,0-.23,0.24,0.24,0,0,0-.14.18,0.49,0.49,0,0,0,0,.19l-0.77,1.89a0.17,0.17,0,0,0-.11,0,0.25,0.25,0,0,1-.11,0l-0.77-1.9a0.48,0.48,0,0,0,0-.19,0.24,0.24,0,0,0-.14-0.18,0.26,0.26,0,0,0,0,.23,0.45,0.45,0,0,0,.1.17l0.78,1.91a0.32,0.32,0,0,0-.05.44c0.12,0.29-.07.22-0.07,0.22S11.6,9.32,9.92,8.34s-3.52-2-3.78-.53,0.22,1.42.36,2,0.28,2.34.76,2.75A6.1,6.1,0,0,0,9.67,13s-2.15,1.24-2.13,2,0.62,4.85,1.82,4.91,2-1.86,2.32-2.78a27,27,0,0,1,.92-2.84,8.43,8.43,0,0,1,.14,1.51c0.11,0.3.25,0.26,0.25,0.26s0.14,0,.25-0.26a8.43,8.43,0,0,1,.14-1.51,26.83,26.83,0,0,1,.92,2.84c0.34,0.92,1.12,2.84,2.32,2.78s1.79-4.17,1.82-4.91-2.13-2-2.13-2a6.1,6.1,0,0,0,2.41-.44c0.48-.41.62-2.13,0.76-2.75s0.62-.62.36-2S17.75,7.36,16.07,8.34Z"/><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><rect y="7" width="26" height="1"/><rect y="10" width="26" height="1"/><rect y="13" width="26" height="1"/><rect y="16" width="26" height="1"/><rect y="19" width="26" height="1"/></g></svg>');
+    }
+    // Table Wrap
+    &.icon-wrap-table-inline {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect x="1" y="1" width="26" height="1"/><rect x="1" y="4" width="26" height="1"/><rect x="1" y="25" width="26" height="1"/><rect x="1" y="22" width="26" height="1"/><rect x="7" y="7" width="14" height="13"/></g></svg>');
+    }
+    &.icon-wrap-table-flow {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect x="1" y="1" width="26" height="1"/><rect x="1" y="4" width="26" height="1"/><rect x="1" y="25" width="26" height="1"/><rect x="1" y="22" width="26" height="1"/><rect x="1" y="7" width="4" height="1"/><rect x="1" y="10" width="4" height="1"/><rect x="1" y="13" width="4" height="1"/><rect x="1" y="16" width="4" height="1"/><rect x="1" y="19" width="4" height="1"/><rect x="23" y="19" width="4" height="1"/><rect x="23" y="16" width="4" height="1"/><rect x="23" y="13" width="4" height="1"/><rect x="23" y="10" width="4" height="1"/><rect x="23" y="7" width="4" height="1"/><rect x="7" y="7" width="14" height="13"/></g></svg>');
+    }
+    &.icon-block-align-left {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect x="1" y="1" width="26" height="1"/><rect x="1" y="4" width="26" height="1"/><rect x="1" y="25" width="26" height="1"/><rect x="1" y="22" width="26" height="1"/><rect x="1" y="8" width="12" height="11"/></g></svg>');
+    }
+    &.icon-block-align-center {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><rect x="7" y="8.08" width="12" height="10.92"/></g></svg>');
+    }
+    &.icon-block-align-right {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect x="1" y="1" width="26" height="1"/><rect x="1" y="4" width="26" height="1"/><rect x="1" y="25" width="26" height="1"/><rect x="1" y="22" width="26" height="1"/><rect x="15" y="8" width="12" height="11"/></g></svg>');
+    }
+    // Insert link/image-library
+    &.icon-link {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
+    }
+    &.icon-image-library {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.2;}.cls-3{fill:#fff;}.cls-10,.cls-11,.cls-4,.cls-6,.cls-7,.cls-8,.cls-9{mix-blend-mode:multiply;}.cls-4{fill:url(#grad_8);}.cls-5{fill:url(#grad_10);}.cls-6{fill:url(#grad_12);}.cls-7{fill:url(#grad_14);}.cls-8{fill:url(#grad_79);}.cls-9{fill:url(#grad_77);}.cls-10{fill:url(#grad_75);}.cls-11{fill:url(#grad_81);}</style><linearGradient id="grad_8" x1="11.08" y1="10.26" x2="11.08" y2="1.26" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3e916"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_10" x1="11.08" y1="20.44" x2="11.08" y2="11.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5eb6e8"/><stop offset="1" stop-color="#958cc3"/></linearGradient><linearGradient id="grad_12" x1="1.46" y1="11.05" x2="10.46" y2="11.05" gradientTransform="translate(17 5.09) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#cc8dba"/><stop offset="1" stop-color="#f86867"/></linearGradient><linearGradient id="grad_14" x1="11.73" y1="11.05" x2="20.73" y2="11.05" gradientTransform="translate(27.28 -5.18) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6ac07f"/><stop offset="1" stop-color="#c5da3d"/></linearGradient><linearGradient id="grad_79" x1="11.74" y1="10.42" x2="17.52" y2="4.63" gradientTransform="translate(30.29 2.51) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c5da3d"/><stop offset="1" stop-color="#f3e916"/></linearGradient><linearGradient id="grad_77" x1="4.7" y1="17.49" x2="10.48" y2="11.71" gradientTransform="translate(23.24 19.65) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9595c3"/><stop offset="1" stop-color="#cc8dba"/></linearGradient><linearGradient id="grad_75" x1="4.69" y1="4.64" x2="10.47" y2="10.42" gradientTransform="translate(7.54 -3.15) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f86867"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_81" x1="11.77" y1="11.78" x2="17.55" y2="17.56" gradientTransform="translate(14.63 -6.05) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5ec0e8"/><stop offset="1" stop-color="#6ac07f"/></linearGradient></defs><title>icons_for_svg</title><g class="cls-1"><g id="Слой_1" data-name="Слой 1"><rect class="cls-2" x="0.09" y="0.01" width="22" height="22" rx="4" ry="4"/><rect class="cls-3" x="0.57" y="0.49" width="21.04" height="21.04" rx="3.6" ry="3.6"/><rect class="cls-4" x="8.33" y="1.26" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-5" x="8.33" y="11.76" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-6" x="3.21" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-5.09 17) rotate(-90)"/><rect class="cls-7" x="13.48" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(5.18 27.28) rotate(-90)"/><rect class="cls-8" x="11.87" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(19.64 23.19) rotate(-135)"/><rect class="cls-9" x="4.8" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(2.54 30.33) rotate(-135)"/><rect class="cls-10" x="4.83" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-3.1 7.56) rotate(-45)"/><rect class="cls-11" x="11.87" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-6.07 14.63) rotate(-45)"/></g></g></svg>');
+    }
   }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/css/icons-material.less b/apps/documenteditor/mobile/src/css/icons-material.less
index 75c1388cf..2d8480742 100644
--- a/apps/documenteditor/mobile/src/css/icons-material.less
+++ b/apps/documenteditor/mobile/src/css/icons-material.less
@@ -29,6 +29,11 @@
     }
   }
   i.icon {
+    &.icon-expand-down {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
+    }
     //Settings
     &.icon-search {
       width: 22px;
@@ -70,5 +75,115 @@
       height: 22px;
       .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
     }
+    //Edit
+    &.icon-text-align-left {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+    }
+    &.icon-text-align-right {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+    }
+    &.icon-text-align-center {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+    }
+    &.icon-text-align-just {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+    }
+    &.icon-de-indent {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
+    }
+    &.icon-in-indent {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
+    }
+    // Table
+    &.icon-table-add-column-left {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
+    }
+    &.icon-table-add-column-right {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
+    }
+    &.icon-table-add-row-above {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
+    }
+    &.icon-table-add-row-below {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
+    }
+    &.icon-table-remove-column {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+    }
+    &.icon-table-remove-row {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+    }
+    // Reorder
+    &.icon-move-backward {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>');
+    }
+    &.icon-move-forward {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>');
+    }
+    &.icon-move-background {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>');
+    }
+    &.icon-move-foreground {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
+    }
+    // Table Wrap
+    &.icon-block-align-left {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect x="1" y="1" width="26" height="1"/><rect x="1" y="4" width="26" height="1"/><rect x="1" y="25" width="26" height="1"/><rect x="1" y="22" width="26" height="1"/><rect x="1" y="8" width="12" height="11"/></g></svg>');
+    }
+    &.icon-block-align-center {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><rect x="7" y="8.08" width="12" height="10.92"/></g></svg>');
+    }
+    &.icon-block-align-right {
+      width: 28px;
+      height: 28px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect x="1" y="1" width="26" height="1"/><rect x="1" y="4" width="26" height="1"/><rect x="1" y="25" width="26" height="1"/><rect x="1" y="22" width="26" height="1"/><rect x="15" y="8" width="12" height="11"/></g></svg>');
+    }
+    // Insert link/image-library
+    &.icon-link {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.0235 7C18.4006 7 19.5743 7.49845 20.5446 8.49534C21.5149 9.46108 22 10.6293 22 12C22 13.3708 21.5149 14.5546 20.5446 15.5515C19.5743 16.5172 18.4006 17.0001 17.0235 17.0001H13V15H17C17.8451 15 18.5884 14.7882 19.1831 14.1963C19.8091 13.5733 20 12.8411 20 12C20 11.1589 19.8091 10.4424 19.1831 9.85049C18.5884 9.22743 17.8685 9 17.0235 9H13V7H17.0235ZM8.00939 12.9814V11.0187H15.9906V12.9814H8.00939ZM4.76995 9.85049C4.17527 10.4424 4 11.1589 4 12C4 12.8411 4.17527 13.5733 4.76995 14.1963C5.39593 14.7882 6.15493 15 7 15H11.0141V17.0001H6.97653C5.59937 17.0001 4.42567 16.5172 3.4554 15.5515C2.48513 14.5546 2 13.3708 2 12C2 10.6293 2.48513 9.46108 3.4554 8.49534C4.42567 7.49845 5.59937 7 6.97653 7H11.0141V9H6.97653C6.13146 9 5.39593 9.22743 4.76995 9.85049Z" fill="@{themeColor}"/></svg>');
+    }
+    &.icon-image-library {
+      width: 24px;
+      height: 24px;
+      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V15.5822L8.03349 11.6898C8.47476 11.3109 9.11904 11.2865 9.58778 11.6308L13.5726 14.5579L15.9619 12.6774C16.4488 12.2942 17.1428 12.3255 17.5933 12.7509L20.5 15.4962V6C20.5 5.72386 20.2761 5.5 20 5.5ZM20.5 17.5294L20.485 17.5453L16.7201 13.9895L14.3509 15.8542C13.9095 16.2016 13.2905 16.2119 12.8378 15.8793L8.85988 12.9573L3.5 17.5592V18C3.5 18.2761 3.72386 18.5 4 18.5H20C20.2761 18.5 20.5 18.2761 20.5 18V17.5294ZM4 4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4H4ZM16.5 9.5C16.5 11.1569 15.1569 12.5 13.5 12.5C11.8431 12.5 10.5 11.1569 10.5 9.5C10.5 7.84315 11.8431 6.5 13.5 6.5C15.1569 6.5 16.5 7.84315 16.5 9.5ZM13.5 11C14.3284 11 15 10.3284 15 9.5C15 8.67157 14.3284 8 13.5 8C12.6716 8 12 8.67157 12 9.5C12 10.3284 12.6716 11 13.5 11Z" fill="@{themeColor}"/></g><defs><clipPath id="clip0"><path d="M0 0H24V24H0V0Z" fill="transparent"/></clipPath></defs></svg>');
+    }
   }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
index c4b383947..5f67b981d 100644
--- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
@@ -123,12 +123,12 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
         <Navbar>
         {
             editors.length > 1 ?
-                <NavLeft tabbar>
+                <div className='tab-buttons'>
                     {editors.map((item, index) => <Link key={"de-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
-                </NavLeft> :
+                </div> :
                 <NavTitle>{ editors[0].caption }</NavTitle>
         }
-        { !inPopover && <NavRight><Link sheetClose>{_t.textClose}</Link></NavRight> }
+        { !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
         </Navbar>
     )
 };
diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
index 60600d0d4..9413c84e6 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
@@ -27,13 +27,27 @@ const PageWrap = props => {
         <Page>
             <Navbar title={_t.textWrap} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}></ListItem>
-                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}></ListItem>
-                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}></ListItem>
-                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}></ListItem>
-                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}></ListItem>
-                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}></ListItem>
-                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}></ListItem>
+                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
+                    <Icon slot="media" icon="icon-wrap-inline"></Icon>
+                </ListItem>
+                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
+                    <Icon slot="media" icon="icon-wrap-square"></Icon>
+                </ListItem>
+                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
+                    <Icon slot="media" icon="icon-wrap-tight"></Icon>
+                </ListItem>
+                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
+                    <Icon slot="media" icon="icon-wrap-through"></Icon>
+                </ListItem>
+                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
+                    <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>
+                </ListItem>
+                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
+                    <Icon slot="media" icon="icon-wrap-infront"></Icon>
+                </ListItem>
+                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
+                    <Icon slot="media" icon="icon-wrap-behind"></Icon>
+                </ListItem>
             </List>
             {
                 wrapType !== 'inline' &&
@@ -97,10 +111,18 @@ const PageReorder = props => {
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}}></ListItem>
-                <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}}></ListItem>
-                <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}}></ListItem>
-                <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}}></ListItem>
+                <ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                </ListItem>
+                <ListItem title={_t.textSendToBackground} onClick={() => {props.onReorder('all-down')}} link='#' className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-background"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveForward} onClick={() => {props.onReorder('move-up')}} link='#' className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveBackward} onClick={() => {props.onReorder('move-down')}} link='#' className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                </ListItem>
             </List>
         </Page>
     )
@@ -125,7 +147,7 @@ const EditChart = props => {
                 }}></ListItem>
             </List>
             <List>
-                <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}}/>
+                <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='red'/>
             </List>
         </Fragment>
     )
diff --git a/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx b/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx
index 30be11f4b..93b125f6f 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditHeader.jsx
@@ -38,8 +38,8 @@ const EditHeader = props => {
                     <div slot='after-start'>{_startAt}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {props.onStartAt(_startAt, true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {props.onStartAt(_startAt, false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {props.onStartAt(_startAt, true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {props.onStartAt(_startAt, false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx b/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx
index b52021872..251e1dd09 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx
@@ -42,7 +42,7 @@ const EditHyperlink = props => {
                 <ListButton className={stateLink.length < 1 ? 'disabled' : ''} title={_t.textEditLink} onClick={() => {
                     props.onEditLink(stateLink, stateDisplay, stateTip)
                 }}></ListButton>
-                <ListButton title={_t.textRemoveLink} onClick={() => {props.onRemoveLink()}}></ListButton>
+                <ListButton title={_t.textRemoveLink} onClick={() => {props.onRemoveLink()}} className='red'/>
             </List>
         </Fragment>
     )
diff --git a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
index 0a6c42f39..ddc0abbfb 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
@@ -20,33 +20,53 @@ const PageWrap = props => {
         <Page>
             <Navbar title={_t.textWrap} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}></ListItem>
-                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}></ListItem>
-                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}></ListItem>
-                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}></ListItem>
-                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}></ListItem>
-                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}></ListItem>
-                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}></ListItem>
+                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
+                    <Icon slot="media" icon="icon-wrap-inline"></Icon>
+                </ListItem>
+                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
+                    <Icon slot="media" icon="icon-wrap-square"></Icon>
+                </ListItem>
+                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
+                    <Icon slot="media" icon="icon-wrap-tight"></Icon>
+                </ListItem>
+                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
+                    <Icon slot="media" icon="icon-wrap-through"></Icon>
+                </ListItem>
+                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
+                    <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>
+                </ListItem>
+                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
+                    <Icon slot="media" icon="icon-wrap-infront"></Icon>
+                </ListItem>
+                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
+                    <Icon slot="media" icon="icon-wrap-behind"></Icon>
+                </ListItem>
             </List>
             {
                 wrapType !== 'inline' &&
                 <Fragment>
                     <BlockTitle>{_t.textAlign}</BlockTitle>
                     <List>
-                        <ListItem>
+                        <ListItem className='buttons'>
                             <Row>
                                 <a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
                                    onClick={() => {
                                        props.onAlign(Asc.c_oAscAlignH.Left)
-                                   }}>left</a>
+                                   }}>
+                                    <Icon slot="media" icon="icon-text-align-left"></Icon>
+                                </a>
                                 <a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
                                    onClick={() => {
                                        props.onAlign(Asc.c_oAscAlignH.Center)
-                                   }}>center</a>
+                                   }}>
+                                    <Icon slot="media" icon="icon-text-align-center"></Icon>
+                                </a>
                                 <a className={'button' + (align === Asc.c_oAscAlignH.Right ? ' active' : '')}
                                    onClick={() => {
                                        props.onAlign(Asc.c_oAscAlignH.Right)
-                                   }}>right</a>
+                                   }}>
+                                    <Icon slot="media" icon="icon-text-align-right"></Icon>
+                                </a>
                             </Row>
                         </ListItem>
                     </List>
@@ -125,10 +145,14 @@ const PageReplace = props => {
         <Page>
             <Navbar title={_t.textReplace} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}></ListItem>
+                <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
+                    <Icon slot="media" icon="icon-link"></Icon>
+                </ListItem>
                 <ListItem title={_t.textPictureFromURL} link='/edit-image-link/' routeProps={{
                     onReplaceByUrl: props.onReplaceByUrl
-                }}></ListItem>
+                }}>
+                    <Icon slot="media" icon="icon-image-library"></Icon>
+                </ListItem>
             </List>
         </Page>
     )
@@ -141,10 +165,18 @@ const PageReorder = props => {
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}}></ListItem>
-                <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}}></ListItem>
-                <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}}></ListItem>
-                <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}}></ListItem>
+                <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                </ListItem>
+                <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-background"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                </ListItem>
             </List>
         </Page>
     )
@@ -173,7 +205,7 @@ const EditImage = props => {
             </List>
             <List>
                 <ListButton title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/>
-                <ListButton title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}}/>
+                <ListButton title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}} className='red'/>
             </List>
         </Fragment>
     )
diff --git a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
index 4745c1c82..0fc14cda8 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
@@ -35,8 +35,8 @@ const PageAdvancedSettings = props => {
                     <div slot='after-start'>{displayBefore}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
@@ -44,8 +44,8 @@ const PageAdvancedSettings = props => {
                     <div slot='after-start'>{displayAfter}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
@@ -53,8 +53,8 @@ const PageAdvancedSettings = props => {
                     <div slot='after-start'>{firstLine + ' ' + metricText}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {props.onSpinFirstLine(paragraphObj, true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {props.onSpinFirstLine(paragraphObj, false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {props.onSpinFirstLine(paragraphObj, true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {props.onSpinFirstLine(paragraphObj, false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
index 66e3befa2..58095486e 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListItemCell, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react';
+import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
 const PageStyle = props => {
@@ -27,33 +27,53 @@ const PageWrap = props => {
         <Page>
             <Navbar title={_t.textWrap} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}></ListItem>
-                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}></ListItem>
-                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}></ListItem>
-                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}></ListItem>
-                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}></ListItem>
-                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}></ListItem>
-                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}></ListItem>
+                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
+                    <Icon slot="media" icon="icon-wrap-inline"></Icon>
+                </ListItem>
+                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
+                    <Icon slot="media" icon="icon-wrap-square"></Icon>
+                </ListItem>
+                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
+                    <Icon slot="media" icon="icon-wrap-tight"></Icon>
+                </ListItem>
+                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
+                    <Icon slot="media" icon="icon-wrap-through"></Icon>
+                </ListItem>
+                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
+                    <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>
+                </ListItem>
+                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
+                    <Icon slot="media" icon="icon-wrap-infront"></Icon>
+                </ListItem>
+                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
+                    <Icon slot="media" icon="icon-wrap-behind"></Icon>
+                </ListItem>
             </List>
             {
                 wrapType !== 'inline' &&
                 <Fragment>
                 <BlockTitle>{_t.textAlign}</BlockTitle>
                 <List>
-                    <ListItem>
+                    <ListItem className='buttons'>
                         <Row>
                             <a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
                                onClick={() => {
                                    props.onShapeAlign(Asc.c_oAscAlignH.Left)
-                               }}>left</a>
+                               }}>
+                                <Icon slot="media" icon="icon-text-align-left"></Icon>
+                            </a>
                             <a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
                                onClick={() => {
                                    props.onShapeAlign(Asc.c_oAscAlignH.Center)
-                               }}>center</a>
+                               }}>
+                                <Icon slot="media" icon="icon-text-align-center"></Icon>
+                            </a>
                             <a className={'button' + (align === Asc.c_oAscAlignH.Right ? ' active' : '')}
                                onClick={() => {
                                    props.onShapeAlign(Asc.c_oAscAlignH.Right)
-                               }}>right</a>
+                               }}>
+                                <Icon slot="media" icon="icon-text-align-right"></Icon>
+                            </a>
                         </Row>
                     </ListItem>
                 </List>
@@ -125,10 +145,18 @@ const PageReorder = props => {
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}}></ListItem>
-                <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}}></ListItem>
-                <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}}></ListItem>
-                <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}}></ListItem>
+                <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                </ListItem>
+                <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-background"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                </ListItem>
             </List>
         </Page>
     )
@@ -156,7 +184,7 @@ const EditShape = props => {
                 }}></ListItem>
             </List>
             <List>
-                <ListItem title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}}/>
+                <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className='red'/>
             </List>
         </Fragment>
     )
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index bb7499958..d169b8537 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle} from 'framework7-react';
+import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
 const PageTableOptions = props => {
@@ -67,8 +67,12 @@ const PageWrap = props => {
         <Page>
             <Navbar title={_t.textWrap} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}></ListItem>
-                <ListItem title={_t.textFlow} radio checked={wrapType === 'flow'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}></ListItem>
+                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}>
+                    <Icon slot="media" icon="icon-wrap-table-inline"></Icon>
+                </ListItem>
+                <ListItem title={_t.textFlow} radio checked={wrapType === 'flow'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}>
+                    <Icon slot="media" icon="icon-wrap-table-flow"></Icon>
+                </ListItem>
             </List>
             <List>
                 <ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
@@ -80,20 +84,26 @@ const PageWrap = props => {
                 <Fragment>
                     <BlockTitle>{_t.textAlign}</BlockTitle>
                     <List>
-                        <ListItem>
+                        <ListItem className='buttons'>
                             <Row>
                                 <a className={'button' + (align === c_tableAlign.TABLE_ALIGN_LEFT ? ' active' : '')}
                                    onClick={() => {
                                        props.onWrapAlign(c_tableAlign.TABLE_ALIGN_LEFT)
-                                   }}>left</a>
+                                   }}>
+                                    <Icon slot="media" icon="icon-block-align-left"></Icon>
+                                </a>
                                 <a className={'button' + (align === c_tableAlign.TABLE_ALIGN_CENTER ? ' active' : '')}
                                    onClick={() => {
                                        props.onWrapAlign(c_tableAlign.TABLE_ALIGN_CENTER)
-                                   }}>center</a>
+                                   }}>
+                                    <Icon slot="media" icon="icon-block-align-center"></Icon>
+                                </a>
                                 <a className={'button' + (align === c_tableAlign.TABLE_ALIGN_RIGHT ? ' active' : '')}
                                    onClick={() => {
                                        props.onWrapAlign(c_tableAlign.TABLE_ALIGN_RIGHT)
-                                   }}>right</a>
+                                   }}>
+                                    <Icon slot="media" icon="icon-block-align-right"></Icon>
+                                </a>
                             </Row>
                         </ListItem>
                     </List>
@@ -137,21 +147,33 @@ const EditTable = props => {
     return (
         <Fragment>
             <List>
-                <ListItem>
+                <ListItem className='buttons'>
                     <Row>
-                        <a className={'button'} onClick={() => {props.onAddColumnLeft()}}>col-left</a>
-                        <a className={'button'} onClick={() => {props.onAddColumnRight()}}>col-right</a>
-                        <a className={'button'} onClick={() => {props.onAddRowAbove()}}>row-above</a>
-                        <a className={'button'} onClick={() => {props.onAddRowBelow()}}>row-below</a>
+                        <a className={'item-link button'} onClick={() => {props.onAddColumnLeft()}}>
+                            <Icon slot="media" icon="icon-table-add-column-left"></Icon>
+                        </a>
+                        <a className={'item-link button'} onClick={() => {props.onAddColumnRight()}}>
+                            <Icon slot="media" icon="icon-table-add-column-right"></Icon>
+                        </a>
+                        <a className={'item-link button'} onClick={() => {props.onAddRowAbove()}}>
+                            <Icon slot="media" icon="icon-table-add-row-above"></Icon>
+                        </a>
+                        <a className={'item-link button'} onClick={() => {props.onAddRowBelow()}}>
+                            <Icon slot="media" icon="icon-table-add-row-below"></Icon>
+                        </a>
                     </Row>
                 </ListItem>
-                <ListItem>
+                <ListItem className='buttons'>
                     <Row>
-                        <a className={'button'} onClick={() => {props.onRemoveColumn()}}>remove-column</a>
-                        <a className={'button'} onClick={() => {props.onRemoveRow()}}>remove-row</a>
+                        <a className={'item-link button'} onClick={() => {props.onRemoveColumn()}}>
+                            <Icon slot="media" icon="icon-table-remove-column"></Icon>
+                        </a>
+                        <a className={'item-link button'} onClick={() => {props.onRemoveRow()}}>
+                            <Icon slot="media" icon="icon icon-table-remove-row"></Icon>
+                        </a>
                     </Row>
                 </ListItem>
-                <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}}></ListButton>
+                <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='red'></ListButton>
             </List>
             <List>
                 <ListItem title={_t.textTableOptions} link='/edit-table-options/' routeProps={{
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index b58efb6b7..49b2a568e 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -32,8 +32,8 @@ const PageFonts = props => {
                     <div slot='after-start'>{displaySize}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {props.changeFontSize(size, true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {props.changeFontSize(size, false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {props.changeFontSize(size, true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {props.changeFontSize(size, false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
@@ -88,8 +88,8 @@ const PageAdditionalFormatting = props => {
                     <div slot='after-start'>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
@@ -213,7 +213,7 @@ const EditText = props => {
                     changeFontSize: props.changeFontSize,
                     changeFontFamily: props.changeFontFamily
                 }}/>
-                <ListItem>
+                <ListItem className='buttons'>
                     <Row>
                         <a className={'button' + (isBold ? ' active' : '')} onClick={() => { props.toggleBold(!isBold)}}><b>B</b></a>
                         <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
@@ -238,18 +238,30 @@ const EditText = props => {
                 </ListItem>
             </List>
             <List>
-                <ListItem>
+                <ListItem className='buttons'>
                     <Row>
-                        <a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>left</a>
-                        <a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>center</a>
-                        <a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>right</a>
-                        <a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>just</a>
+                        <a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
+                            <Icon slot="media" icon="icon-text-align-left"></Icon>
+                        </a>
+                        <a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
+                            <Icon slot="media" icon="icon-text-align-center"></Icon>
+                        </a>
+                        <a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
+                            <Icon slot="media" icon="icon-text-align-right"></Icon>
+                        </a>
+                        <a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
+                            <Icon slot="media" icon="icon-text-align-just"></Icon>
+                        </a>
                     </Row>
                 </ListItem>
-                <ListItem>
+                <ListItem className='buttons'>
                     <Row>
-                        <a className='button' onClick={() => {props.onParagraphMove(true)}}>moveleft</a>
-                        <a className='button' onClick={() => {props.onParagraphMove(false)}}>moveright</a>
+                        <a className='button item-link' onClick={() => {props.onParagraphMove(true)}}>
+                            <Icon slot="media" icon="icon-de-indent"></Icon>
+                        </a>
+                        <a className='button item-link' onClick={() => {props.onParagraphMove(false)}}>
+                            <Icon slot="media" icon="icon-in-indent"></Icon>
+                        </a>
                     </Row>
                 </ListItem>
                 <ListItem title={t("Edit.textBullets")} link='/edit-text-bullets/' routeProps={{
diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx
index 6f42492be..ccde9ce09 100644
--- a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx
@@ -67,8 +67,8 @@ const PageDocumentMargins = props => {
                     <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {onChangeMargins('top', true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {onChangeMargins('top', false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {onChangeMargins('top', true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {onChangeMargins('top', false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
@@ -76,8 +76,8 @@ const PageDocumentMargins = props => {
                     <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {onChangeMargins('bottom', true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {onChangeMargins('bottom', false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {onChangeMargins('bottom', true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {onChangeMargins('bottom', false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
@@ -85,8 +85,8 @@ const PageDocumentMargins = props => {
                     <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {onChangeMargins('left', true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {onChangeMargins('left', false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {onChangeMargins('left', true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {onChangeMargins('left', false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>
@@ -94,8 +94,8 @@ const PageDocumentMargins = props => {
                     <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}</div>
                     <div slot='after'>
                         <Segmented>
-                            <Button outline className='decrement' onClick={() => {onChangeMargins('right', true)}}> - </Button>
-                            <Button outline className='increment' onClick={() => {onChangeMargins('right', false)}}> + </Button>
+                            <Button outline className='item-link decrement' onClick={() => {onChangeMargins('right', true)}}> - </Button>
+                            <Button outline className='item-link increment' onClick={() => {onChangeMargins('right', false)}}> + </Button>
                         </Segmented>
                     </div>
                 </ListItem>