email folder icons

client/res/templates/email-folder/list-side.tpl

@@ -27,7 +27,7 @@
             data-id="{{get this 'id'}}"
             class="side-link"
             {{#if title}}title="{{title}}"{{/if}}
-        >{{get this 'name'}}</a>
+        ><span class="item-icon-container"><span class="{{iconClass}}"></span></span><span>{{get this 'name'}}</span></a>
     </li>
     {{/each}}
 </ul>

client/src/views/email/list.js

@@ -466,17 +466,29 @@ class EmailListView extends ListView {
             this.FOLDER_ARCHIVE,
         ];
 
+        const iconMap = {
+            [this.FOLDER_TRASH]: 'far fa-trash-alt',
+            [this.FOLDER_SENT]: 'far fa-paper-plane',
+            [this.FOLDER_INBOX]: 'fas fa-inbox',
+            [this.FOLDER_ARCHIVE]: 'far fa-caret-square-down',
+            [this.FOLDER_DRAFTS]: 'far fa-file',
+            [this.FOLDER_IMPORTANT]: 'far fa-star',
+        }
+
         this.getFolderCollection(collection => {
             collection.forEach(model => {
                 if (this.noDropFolderIdList.indexOf(model.id) === -1) {
                     model.droppable = true;
                 }
 
+                model.iconClass = iconMap[model.id];
+
                 if (model.id.indexOf('group:') === 0) {
                     model.title = this.translate('groupFolder', 'fields', 'Email');
-                }
-                else if (auxFolderList.indexOf(model.id) === -1) {
+                    model.iconClass = 'far fa-circle';
+                } else if (auxFolderList.indexOf(model.id) === -1) {
                     model.title = this.translate('folder', 'fields', 'Email');
+                    model.iconClass = 'far fa-folder';
                 }
             });
 

frontend/less/espo/custom.less

@@ -2577,6 +2577,20 @@ table.table td.cell .html-container {
                 transition: 900ms linear background-color;
             }
         }
+
+        .item-icon-container {
+            display: inline-block;
+            width: 18px;
+            margin-left: -2px;
+            margin-right: 8px;
+            text-align: center;
+
+            > span {
+                font-size: 12px;
+                position: relative;
+                top: -1px;
+            }
+        }
     }
 }