Adds a new IconFont-set

Fixes #3921
Added a new set of icons and removed the old one. The new one can used just like the old one.

Changed old improper icons to new ones

- The 'save_alt'-icons are replaced by 'cloud_upload'
- The icon in the navigation for assignments is replaced by 'how_to_vote'
- The drag&drop icon 'unfold_more' is replaced by 'drag_indicator'

client/angular.json

@@ -27,8 +27,7 @@
                             "src/manifest.json"
                         ],
                         "styles": [
-                            "src/styles.scss",
+                            "src/styles.scss"
-                            "node_modules/material-design-icons/iconfont/material-icons.css"
                         ],
                         "scripts": [
                             "node_modules/tinymce/tinymce.min.js",

client/package.json

@@ -45,7 +45,7 @@
         "core-js": "^2.6.3",
         "css-element-queries": "^1.1.1",
         "file-saver": "^2.0.0",
-        "material-design-icons": "^3.0.1",
+        "material-icon-font": "git+https://github.com/petergng/materialIconFont.git",
         "ng-pick-datetime": "^7.0.0",
         "ngx-file-drop": "^5.0.2",
         "ngx-mat-select-search": "^1.5.2",

client/src/app/shared/components/sorting-list/sorting-list.component.html

@@ -1,8 +1,7 @@
 <div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
     <div class="box line" *ngFor="let item of array; let i = index" cdkDrag>
         <div class="section-one" cdkDragHandle>
-            <!-- TODO: drag_indicator after icon update -->
+            <mat-icon>drag_indicator</mat-icon>
-            <mat-icon>unfold_more</mat-icon>
         </div>
         <div class="section-two">
             <!-- {number}. {item.toString()} -->

client/src/app/site/agenda/components/agenda-list/agenda-list.component.html

@@ -132,7 +132,7 @@
         </button>
         <!-- Import -->
         <button mat-menu-item *osPerms="'agenda.can_manage'" routerLink="import">
-            <mat-icon>save_alt</mat-icon>
+            <mat-icon>cloud_upload</mat-icon>
             <span translate>Import</span><span>&nbsp;...</span>
         </button>
     </div>

client/src/app/site/assignments/assignments.config.ts

@@ -18,7 +18,7 @@ export const AssignmentsAppConfig: AppConfig = {
         {
             route: '/assignments',
             displayName: 'Elections',
-            icon: 'poll', // TODO not yet available: 'how_to_vote',
+            icon: 'how_to_vote',
             weight: 400,
             permission: 'assignments.can_see'
         }

client/src/app/site/motions/components/motion-list/motion-list.component.html

@@ -185,7 +185,7 @@
                 <span translate>Export</span>
             </button>
             <button mat-menu-item routerLink="import">
-                <mat-icon>save_alt</mat-icon>
+                <mat-icon>cloud_upload</mat-icon>
                 <span translate>Import</span>
             </button>
         </div>

client/src/app/site/motions/components/statute-paragraph-list/statute-paragraph-list.component.html

@@ -115,7 +115,7 @@
         <span translate>Export as CSV</span>
     </button>
     <button mat-menu-item *osPerms="'motions.can_manage'" routerLink="import">
-        <mat-icon>save_alt</mat-icon>
+        <mat-icon>cloud_upload</mat-icon>
         <span translate>Import</span><span>&nbsp;...</span>
     </button>
 </mat-menu>

client/src/app/site/projector/components/projector-detail/projector-detail.component.html

@@ -136,7 +136,7 @@
             <div cdkDropList class="drop-list" (cdkDropListDropped)="onSortingChange($event)">
                 <div class="list-entry" *ngFor="let element of projector.elements_preview; let i = index" cdkDrag>
                     <div class="drag-handle" cdkDragHandle>
-                        <mat-icon>unfold_more</mat-icon>
+                        <mat-icon>drag_indicator</mat-icon>
                     </div>
                     <div class="name">
                         {{ i+1 }}.&nbsp;<span>{{ getElementDescription(element) }}</span>

client/src/app/site/users/components/user-list/user-list.component.html

@@ -122,7 +122,7 @@
             </button>
 
             <button mat-menu-item *osPerms="'users.can_manage'" routerLink="import">
-                <mat-icon>save_alt</mat-icon>
+                <mat-icon>cloud_upload</mat-icon>
                 <span translate>Import</span><span>&nbsp;...</span>
             </button>
         </div>
@@ -152,7 +152,7 @@
                 </div>
 
                 <button mat-menu-item *osPerms="'users.can_manage'" routerLink="import">
-                    <mat-icon>save_alt</mat-icon>
+                    <mat-icon>cloud_upload</mat-icon>
                     <span translate>Import</span><span>&nbsp;...</span>
                 </button>
 

client/src/styles.scss

@@ -13,6 +13,7 @@
 
 /** fonts */
 @import './assets/styles/fonts.scss';
+@import '~material-icon-font/dist/Material-Icons.css';
 
 /** Mix the component-related style-rules */
 @mixin openslides-components-theme($theme) {
@@ -51,7 +52,7 @@
 }
 
 mat-icon {
-    font-family: MaterialIcons-Regular;
+    font-family: 'Material Icons Baseline';
 }
 
 body {