Add Material Icon library

replace font-awesome icons with material icons
2018-10-11 14:03:44 +02:00 · 2018-10-11 14:03:44 +02:00 · 2cc9188962
commit 2cc9188962
parent 54ee775c64
38 changed files with 2284 additions and 2286 deletions
--- a/client/angular.json
+++ b/client/angular.json
@ -23,7 +23,7 @@
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": ["src/styles.scss"],
+                        "styles": ["src/styles.scss", "node_modules/material-design-icons/iconfont/material-icons.css"],
                        "scripts": []
                    },
                    "configurations": {
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -26,13 +26,11 @@
        "@angular/platform-browser": "^7.0.0-rc.0",
        "@angular/platform-browser-dynamic": "^7.0.0-rc.0",
        "@angular/router": "^7.0.0-rc.0",
-        "@fortawesome/angular-fontawesome": "0.1.0-10",
-        "@fortawesome/fontawesome-svg-core": "^1.2.4",
-        "@fortawesome/free-solid-svg-icons": "^5.3.1",
        "@ngx-pwa/local-storage": "^6.1.1",
        "@ngx-translate/core": "^10.0.2",
        "@ngx-translate/http-loader": "^3.0.1",
        "core-js": "^2.5.4",
+        "material-design-icons": "^3.0.1",
        "ngx-mat-select-search": "^1.4.0",
        "roboto-fontface": "^0.10.0",
        "rxjs": "^6.3.3",
--- a/client/src/app/shared/components/head-bar/head-bar.component.html
+++ b/client/src/app/shared/components/head-bar/head-bar.component.html
@ -1,7 +1,7 @@
 <mat-toolbar color='primary'>
    <button *ngIf="plusButton" class='head-button on-transition-fade' (click)=clickPlusButton()
        mat-fab>
-        <fa-icon icon='plus'></fa-icon>
+        <mat-icon>add</mat-icon>
    </button>

    <span class='app-name on-transition-fade'>
@ -11,15 +11,16 @@
    <span class='spacer'></span>

    <button *ngIf="menuList" class='on-transition-fade' [matMenuTriggerFor]="ellipsisMenu" mat-icon-button>
-        <fa-icon icon='ellipsis-v'></fa-icon>
+        <mat-icon>more_vert</mat-icon>
    </button>
 </mat-toolbar>

 <mat-menu #ellipsisMenu="matMenu">

    <ng-container *ngFor="let item of menuList">
+
        <button mat-menu-item *osPerms="item.perm" (click)=clickMenu(item)>
-            <fa-icon *ngIf="item.icon" [icon]='item.icon'></fa-icon>
+            <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
            {{item.text | translate}}
        </button>
    </ng-container>
--- a/client/src/app/shared/components/head-bar/head-bar.component.ts
+++ b/client/src/app/shared/components/head-bar/head-bar.component.ts
@ -29,7 +29,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 * myMenu = [
 *   {
 *     text: 'Download All',
- *     icon: 'download',
+ *     icon: 'save_alt',
 *     action: 'downloadAllFiles'
 *   },
 * ];
--- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.html
+++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.html
@ -16,7 +16,7 @@
    </p>
    <mat-chip-list #chipList>
        <mat-chip *ngFor="let selectedItem of thisSelector?.value" (removed)="remove(selectedItem)">{{selectedItem.name}}
-            <fa-icon matSuffix icon="times" (click)="remove(selectedItem)"></fa-icon>
+            <mat-icon (click)="remove(selectedItem)">cancel</mat-icon>
        </mat-chip>
    </mat-chip-list>
 </div>
--- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
+++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
@ -1,3 +0,0 @@
-fa-icon {
-    padding-left: 5px;
-}
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@ -19,7 +19,8 @@ import {
    MatTooltipModule,
    MatDatepickerModule,
    MatNativeDateModule,
-    DateAdapter
+    DateAdapter,
+    MatIconModule
 } from '@angular/material';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatChipsModule } from '@angular/material';
@ -31,11 +32,6 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';

-// FontAwesome modules
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-
 // ngx-translate
 import { TranslateModule } from '@ngx-translate/core';

@ -52,8 +48,6 @@ import { SearchValueSelectorComponent } from './components/search-value-selector
 import { OpenSlidesDateAdapter } from './date-adapter';
 import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component';

-library.add(fas);
-
 /**
 * Share Module for all "dumb" components and pipes.
 *
@ -90,7 +84,10 @@ library.add(fas);
        MatSnackBarModule,
        MatChipsModule,
        MatTooltipModule,
-        FontAwesomeModule,
+        // TODO: there is an error with missing icons
+        // we either wait or include a fixed version manually (dirty)
+        // https://github.com/google/material-design-icons/issues/786
+        MatIconModule,
        TranslateModule.forChild(),
        RouterModule,
        NgxMatSelectSearchModule
@ -119,8 +116,8 @@ library.add(fas);
        MatSnackBarModule,
        MatChipsModule,
        MatTooltipModule,
+        MatIconModule,
        NgxMatSelectSearchModule,
-        FontAwesomeModule,
        TranslateModule,
        PermsDirective,
        DomChangeDirective,
--- a/client/src/app/site/agenda/agenda.config.ts
+++ b/client/src/app/site/agenda/agenda.config.ts
@ -9,7 +9,7 @@ export const AgendaAppConfig: AppConfig = {
        {
            route: '/agenda',
            displayName: 'Agenda',
-            icon: 'calendar',
+            icon: 'today', // 'calendar_today' aligns wrong!
            weight: 200,
            permission: 'agenda.can_see'
        }
--- a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
+++ b/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
@ -22,7 +22,7 @@ export class AssignmentListComponent extends ListViewBaseComponent<ViewAssignmen
    public assignmentMenu = [
        {
            text: 'Download All',
-            icon: 'download',
+            icon: 'save_alt',
            action: 'downloadAssignmentButton'
        }
    ];
--- a/client/src/app/site/assignments/assignments.config.ts
+++ b/client/src/app/site/assignments/assignments.config.ts
@ -8,7 +8,7 @@ export const AssignmentsAppConfig: AppConfig = {
        {
            route: '/assignments',
            displayName: 'Elections',
-            icon: 'chart-pie',
+            icon: 'poll', // TODO not yet available: 'how_to_vote',
            weight: 400,
            permission: 'assignments.can_see'
        }
--- a/client/src/app/site/common/components/start/start.component.html
+++ b/client/src/app/site/common/components/start/start.component.html
@ -8,9 +8,9 @@
        <span> {{welcomeText | translate}} </span>

        <button mat-button (click)="TranslateTest()">Translate in console</button>
-        <br/>
+        <br />
        <button mat-button (click)="giveDataStore()">print the dataStore</button>
-        <br/>
+        <br />
        <input matInput #motionNumber placeholder="Number of Motions to add" value="100">
        <button mat-button (click)="createMotions(motionNumber.value)">Add Random Motions</button>
    </div>
--- a/client/src/app/site/config/components/config-field/config-field.component.html
+++ b/client/src/app/site/config/components/config-field/config-field.component.html
@ -21,7 +21,7 @@
        <mat-label translate>{{ configItem.label }}</mat-label>
        <mat-hint *ngIf="configItem.helpText" translate>{{ configItem.helpText }}</mat-hint>
        <span matSuffix>
-            <fa-icon pull="right" class="text-success" *ngIf="updateSuccessIcon" icon='check-circle'></fa-icon>
+            <mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
        </span>
        <mat-error *ngIf="error">
            {{ error }}
--- a/client/src/app/site/config/config.config.ts
+++ b/client/src/app/site/config/config.config.ts
@ -8,7 +8,7 @@ export const ConfigAppConfig: AppConfig = {
        {
            route: '/settings',
            displayName: 'Settings',
-            icon: 'cog',
+            icon: 'settings',
            weight: 700,
            permission: 'core.can_manage_config'
        }
--- a/client/src/app/site/login/components/login-mask/login-mask.component.html
+++ b/client/src/app/site/login/components/login-mask/login-mask.component.html
@ -8,7 +8,8 @@
        <mat-form-field>
            <input matInput required placeholder="Password" formControlName="password" [type]="!hide ? 'password' : 'text'"
                [errorStateMatcher]="parentErrorStateMatcher">
-            <fa-icon matSuffix [icon]="!hide ? 'eye-slash' : 'eye'" (click)="hide = !hide"></fa-icon>
+                <mat-icon matSuffix (click)="hide = !hide">{{ hide ? "visibility_off" : "visibility_on" }}</mat-icon>
+
            <mat-error>{{loginErrorMsg}}</mat-error>
        </mat-form-field>

--- a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
@ -22,7 +22,7 @@
    <ng-container matColumnDef="download">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Download </mat-header-cell>
        <mat-cell (click)="download(file)" *matCellDef="let file">
-            <fa-icon icon='download'></fa-icon>
+            <mat-icon>save_alt</mat-icon>
        </mat-cell>
    </ng-container>

--- a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
+++ b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
@ -24,7 +24,7 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile>
    public extraMenu = [
        {
            text: 'Download',
-            icon: 'download',
+            icon: 'save_alt',
            action: 'downloadAllFiles'
        }
    ];
--- a/client/src/app/site/mediafiles/mediafile.config.ts
+++ b/client/src/app/site/mediafiles/mediafile.config.ts
@ -8,7 +8,7 @@ export const MediafileAppConfig: AppConfig = {
        {
            route: '/mediafiles',
            displayName: 'Files',
-            icon: 'paperclip',
+            icon: 'attach_file',
            weight: 600,
            permission: 'mediafiles.can_see'
        }
--- a/client/src/app/site/motions/components/category-list/category-list.component.html
+++ b/client/src/app/site/motions/components/category-list/category-list.component.html
@ -2,7 +2,7 @@
 </os-head-bar>
 <div class='custom-table-header on-transition-fade'>
        <button mat-button>
-            <fa-icon icon="search"></fa-icon>
+            <mat-icon>search</mat-icon>
        </button>
    </div>
 <mat-accordion class="os-card">
@ -40,18 +40,18 @@
        <mat-action-row>
            <button *ngIf="!category.edit" mat-button class='on-transition-fade' (click)=onEditButton(category)
                mat-icon-button>
-                <fa-icon icon='pen'></fa-icon>
+                <mat-icon>add</mat-icon>
            </button>
            <button *ngIf="category.edit" mat-button class='on-transition-fade' (click)=onCancelButton(category)
                mat-icon-button>
-                <fa-icon icon='times'></fa-icon>
+                <mat-icon>close</mat-icon>
            </button>
            <button *ngIf="category.edit" mat-button class='on-transition-fade' (click)=onSaveButton(category)
                mat-icon-button>
-                <fa-icon icon='save'></fa-icon>
+                <mat-icon>save</mat-icon>
            </button>
            <button mat-button class='on-transition-fade' (click)=onDeleteButton(category) mat-icon-button>
-                <fa-icon icon='trash'></fa-icon>
+                <mat-icon>delete</mat-icon>
            </button>
        </mat-action-row>
    </mat-expansion-panel>
--- a/client/src/app/site/motions/components/motion-comment-section-list/motion-comment-section-list.component.html
+++ b/client/src/app/site/motions/components/motion-comment-section-list/motion-comment-section-list.component.html
@ -38,14 +38,14 @@
                        {{ section.name }}
                    </div>
                    <div class="read">
-                        <fa-icon icon="eye"></fa-icon>
+                        <mat-icon>visibility</mat-icon>
                        {{ section.read_groups }}
                        <ng-container *ngIf="section.read_groups.length === 0">
                            &ndash;
                        </ng-container>
                    </div>
                    <div class="write">
-                        <fa-icon icon="pen"></fa-icon>
+                        <mat-icon>add</mat-icon>
                        {{ section.write_groups }}
                        <ng-container *ngIf="section.write_groups.length === 0">
                            &ndash;
@ -90,18 +90,18 @@
        <mat-action-row>
            <button *ngIf="editId !== section.id" mat-button class="on-transition-fade" (click)="onEditButton(section)"
                mat-icon-button>
-                <fa-icon icon='pen'></fa-icon>
+                <mat-icon>add</mat-icon>
            </button>
            <button *ngIf="editId === section.id" mat-button class="on-transition-fade" (click)="editId = null"
                mat-icon-button>
-                <fa-icon icon='times'></fa-icon>
+                <mat-icon>cancel</mat-icon>
            </button>
            <button *ngIf="editId === section.id" mat-button class="on-transition-fade" (click)="onSaveButton(section)"
                mat-icon-button>
-                <fa-icon icon='save'></fa-icon>
+                <mat-icon>save</mat-icon>
            </button>
            <button mat-button class='on-transition-fade' (click)=onDeleteButton(section) mat-icon-button>
-                <fa-icon icon='trash'></fa-icon>
+                <mat-icon>delete</mat-icon>
            </button>
        </mat-action-row>
    </mat-expansion-panel>
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
@ -2,8 +2,8 @@

    <button (click)='editMotionButton()' [ngClass]="{'save-button': editMotion}" class='generic-mini-button on-transition-fade'
        mat-mini-fab>
-        <fa-icon *ngIf="!editMotion" icon='pen'></fa-icon>
-        <fa-icon *ngIf="editMotion" icon='check'></fa-icon>
+        <mat-icon *ngIf="!editMotion">add</mat-icon>
+        <mat-icon *ngIf="editMotion">check</mat-icon>
    </button>

    <div class='motion-title on-transition-fade'>
@ -24,13 +24,13 @@
    <!-- Button on the right-->
    <div *ngIf="editMotion">
        <button (click)='cancelEditMotionButton()' class='on-transition-fade' color="warn" mat-raised-button>
-            <span translate>Abort</span>
-            <fa-icon class="icon-text-distance" icon='times'></fa-icon>
+            <span translate>Cancel</span>
+            <mat-icon class="icon-text-distance">cancel</mat-icon>
        </button>
    </div>
    <div *ngIf="!editMotion">
        <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
-            <fa-icon icon='ellipsis-v'></fa-icon>
+            <mat-icon icon>more_vert</mat-icon>
        </button>
    </div>

@ -53,7 +53,7 @@
        <mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-block meta-info-panel'>
            <mat-expansion-panel-header>
                <mat-panel-title>
-                    <fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
+                    <mat-icon>info</mat-icon>
                    <span translate>Meta information</span>
                </mat-panel-title>
            </mat-expansion-panel-header>
@ -68,7 +68,7 @@
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
-                    <fa-icon icon='file-signature' [fixedWidth]="true"></fa-icon>
+                    <mat-icon icon>speaker_notes</mat-icon>
                    <span translate>Personal note</span>
                </mat-panel-title>
            </mat-expansion-panel-header>
@ -79,7 +79,7 @@
        <mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'>
            <mat-expansion-panel-header>
                <mat-panel-title>
-                    <fa-icon icon='align-left' [fixedWidth]="true"></fa-icon>
+                    <mat-icon>format_align_left</mat-icon>
                    <span translate>Content</span>
                </mat-panel-title>
            </mat-expansion-panel-header>
@ -107,8 +107,8 @@
                        <mat-card-title>
                            <span translate>Personal Note</span>
                            <div class="title-right">
-                                <fa-icon icon="pen" [fixedWidth]=" true"></fa-icon>
-                                <fa-icon icon="ellipsis-v" [fixedWidth]="true"></fa-icon>
+                                <mat-icon>add</mat-icon>
+                                <mat-icon>more_vert</mat-icon>
                            </div>

                        </mat-card-title>
@ -191,7 +191,7 @@
                    <mat-option *ngFor="let state of motionCopy.nextStates" [value]="state.id">{{state}}</mat-option>
                    <mat-divider></mat-divider>
                    <mat-option>
-                        <fa-icon icon='exclamation-triangle'></fa-icon><span translate>Reset State</span>
+                        <mat-icon>replay</mat-icon><span translate>Reset State</span>
                    </mat-option>
                </mat-select>
            </mat-form-field>
@ -211,7 +211,7 @@

                    <!-- TODO has no effect -->
                    <mat-option>
-                        <fa-icon icon='exclamation-triangle'></fa-icon>
+                        <mat-icon>replay</mat-icon>
                        <span translate>Reset recommendation</span>
                    </mat-option>
                </mat-select>
@ -254,10 +254,10 @@
        <!-- Line Number and Diff buttons-->
        <div class="motion-text-controls">
            <button type="button" mat-icon-button [matMenuTriggerFor]="lineNumberingMenu">
-                <fa-icon icon="list-ol" [fixedWidth]="true"></fa-icon>
+                <mat-icon>format_list_numbered</mat-icon>
            </button>
            <button type="button" mat-icon-button [matMenuTriggerFor]="changeRecoMenu">
-                <fa-icon icon="edit" [fixedWidth]="true"></fa-icon>
+                <mat-icon>rate_review</mat-icon>
            </button>
        </div>

--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
@ -25,7 +25,7 @@ span {
 }

 mat-panel-title {
-    fa-icon {
+    mat-icon {
        margin-right: 35px; //on line with text
    }
 }
@ -38,7 +38,7 @@ mat-panel-title {
        font-size: 80%;
        color: gray;

-        fa-icon {
+        mat-icon {
            margin-left: 5px;
        }
    }
@ -53,7 +53,7 @@ mat-panel-title {
    }

    .mat-form-field-label-wrapper {
-        fa-icon {
+        mat-icon {
            margin-left: 5px;
        }
    }
@ -131,7 +131,7 @@ mat-expansion-panel {

                    .title-right {
                        float: right;
-                        fa-icon {
+                        mat-icon {
                            padding-left: 10px;
                        }
                    }
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.html
@ -42,7 +42,7 @@
        <mat-header-cell *matHeaderCellDef mat-sort-header> State </mat-header-cell>
        <mat-cell *matCellDef="let motion">
            <div *ngIf='isDisplayIcon(motion.state) && motion.state' class='innerTable'>
-                <fa-icon icon={{getStateIcon(motion.state)}}></fa-icon>
+                <mat-icon>{{getStateIcon(motion.state)}}></mat-icon>
            </div>
        </mat-cell>
    </ng-container>
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.scss
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.scss
@ -38,7 +38,7 @@
        flex: 0 0 30px;
        text-align: center;

-        fa-icon {
+        mat-icon {
            font-size: 150%;
        }
    }
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.ts
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.ts
@ -36,7 +36,7 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
    public motionMenuList = [
        {
            text: 'Download',
-            icon: 'download',
+            icon: 'save_alt',
            action: 'downloadMotions'
        },
        {
@ -98,11 +98,11 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
    public getStateIcon(state: WorkflowState): string {
        const stateName = state.name;
        if (stateName === 'accepted') {
-            return 'thumbs-up';
+            return 'thumb_up';
        } else if (stateName === 'rejected') {
-            return 'thumbs-down';
+            return 'thumb_down';
        } else if (stateName === 'not decided') {
-            return 'question';
+            return 'help';
        } else {
            return '';
        }
--- a/client/src/app/site/motions/motions.config.ts
+++ b/client/src/app/site/motions/motions.config.ts
@ -22,7 +22,7 @@ export const MotionsAppConfig: AppConfig = {
        {
            route: '/motions',
            displayName: 'Motions',
-            icon: 'file-alt',
+            icon: 'assignment',
            weight: 300,
            permission: 'motions.can_see'
        }
--- a/client/src/app/site/site.component.html
+++ b/client/src/app/site/site.component.html
@ -14,24 +14,24 @@
            </mat-expansion-panel-header>
            <mat-nav-list>
                <a mat-list-item [matMenuTriggerFor]="languageMenu">
-                    <fa-icon icon='globe-americas'></fa-icon>
+                    <mat-icon>language</mat-icon>
                    <span> {{getLangName(this.translate.currentLang)}} </span>
                </a>
                <a *ngIf="isLoggedIn" (click)='editProfile()' mat-list-item>
-                    <fa-icon icon='user-cog'></fa-icon>
+                    <mat-icon>person</mat-icon>
                    <span translate>Edit Profile</span>
                </a>
                <a *ngIf="isLoggedIn" (click)='changePassword()' mat-list-item>
-                    <fa-icon icon='key'></fa-icon>
+                    <mat-icon>vpn_key</mat-icon>
                    <span translate>Change Password</span>
                </a>
                <mat-divider></mat-divider>
                <a *ngIf="isLoggedIn" (click)='logout()' mat-list-item>
-                    <fa-icon icon='sign-out-alt'></fa-icon>
+                    <mat-icon>exit_to_app</mat-icon>
                    <span translate>Logout</span>
                </a>
                <a *ngIf="!isLoggedIn" routerLink='/login' mat-list-item>
-                    <fa-icon icon='sign-out-alt'></fa-icon>
+                    <mat-icon>exit_to_app</mat-icon>
                    <span translate>Login</span>
                </a>
            </mat-nav-list>
@ -46,15 +46,14 @@
        <!-- navigation -->
        <mat-nav-list class='main-nav'>
            <span *ngFor="let entry of mainMenuService.entries">
-                <a [@navItemAnim]  *osPerms="entry.permission" mat-list-item (click)='toggleSideNav()'
+                <a [@navItemAnim] *osPerms="entry.permission" mat-list-item (click)='toggleSideNav()'
                    [routerLink]='entry.route' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}">
-                    <fa-icon [icon]='entry.icon'></fa-icon>
-                    {{ entry.displayName | translate}}
+                    <mat-icon>{{entry.icon}}</mat-icon>{{ entry.displayName | translate}}
                </a>
            </span>
            <mat-divider></mat-divider>
            <a [@navItemAnim] *osPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active' (click)='toggleSideNav()'>
-                <fa-icon icon='video'></fa-icon>
+                <mat-icon>videocam</mat-icon>
                <span translate>Projector</span>
            </a>
        </mat-nav-list>
@ -67,13 +66,13 @@

                <!-- show/hide menu button -->
                <button mat-icon-button *ngIf="vp.isMobile" (click)='sideNav.toggle()'>
-                    <fa-icon icon='bars'></fa-icon>
+                    <mat-icon>menu</mat-icon>
                </button>

                <!-- glob search and generic menu on the right -->
                <span class='spacer'></span>
                <button mat-icon-button (click)='sideNav.toggle()'>
-                    <fa-icon icon='search'></fa-icon>
+                    <mat-icon>search</mat-icon>
                </button>
            </mat-toolbar>
        </header>
--- a/client/src/app/site/site.component.scss-theme.scss
+++ b/client/src/app/site/site.component.scss-theme.scss
@ -14,7 +14,7 @@
            /** nav panel on the left */
            mat-sidenav {
                /** rules for icons in the whole site-view */
-                .ng-fa-icon {
+                mat-icon {
                    min-width: 20px; //puts the text to the right on the same level
                    margin-right: 10px; // the distance from the icon to the text
                }
@ -47,7 +47,7 @@
                border-top-color: rgba(255, 255, 255, 0.25);
            }

-            fa-icon {
+            mat-icon {
                color: mat-color($background, raised-button);
            }

@ -62,7 +62,7 @@

        /** style and align the nav icons the icons*/
        .main-nav {
-            fa-icon {
+            mat-icon {
                color: mat-color($foreground, icon);
            }
            span {
@ -73,7 +73,7 @@

        /** style the active link */
        .active {
-            .ng-fa-icon {
+            mat-icon {
                color: mat-color($primary);
            }
            span {
--- a/client/src/app/site/users/components/group-list/group-list.component.html
+++ b/client/src/app/site/users/components/group-list/group-list.component.html
@ -1,8 +1,8 @@
 <mat-toolbar color='primary'>
    <button *osPerms="'users.can_manage'" (click)='newGroupButton()' class='generic-mini-button on-transition-fade'
        mat-mini-fab>
-        <fa-icon *ngIf="!newGroup" icon='plus'></fa-icon>
-        <fa-icon *ngIf="newGroup" icon='times'></fa-icon>
+        <mat-icon *ngIf="!newGroup">add</mat-icon>
+        <mat-icon *ngIf="newGroup">cancel</mat-icon>
    </button>

    <div class="on-transition-fade">
@ -19,7 +19,7 @@
        </mat-form-field>

        <button type="submit" mat-mini-fab color="primary">
-            <fa-icon icon="save"></fa-icon>
+            <mat-icon>save</mat-icon>
        </button>
    </form>
 </div>
@ -31,15 +31,15 @@
        </mat-form-field>

        <button type="submit" mat-mini-fab color="primary">
-            <fa-icon icon="save"></fa-icon>
+            <mat-icon>save</mat-icon>>
        </button>

        <button type="button" mat-mini-fab color="warn" (click)="deleteSelectedGroup()" [disabled]="isProtected(selectedGroup)">
-            <fa-icon icon="trash"></fa-icon>
+            <mat-icon>delete</mat-icon>
        </button>

        <button type="button" mat-mini-fab color="primary" (click)="cancelEditing()">
-            <fa-icon icon="times"></fa-icon>
+            <mat-icon>cancel</mat-icon>
        </button>
    </form>
 </div>
--- a/client/src/app/site/users/components/user-detail/user-detail.component.html
+++ b/client/src/app/site/users/components/user-detail/user-detail.component.html
@ -2,8 +2,8 @@

    <button *osPerms="'users.can_manage';or:ownPage" (click)='editUserButton()' [ngClass]="{'save-button': editUser}"
        class='generic-mini-button on-transition-fade' mat-mini-fab>
-        <fa-icon *ngIf='!editUser' icon='pen'></fa-icon>
-        <fa-icon *ngIf='editUser' icon='check'></fa-icon>
+        <mat-icon *ngIf='!editUser'>add</mat-icon>
+        <mat-icon *ngIf='editUser'>check</mat-icon>
    </button>

    <div class="on-transition-fade">
@ -23,13 +23,13 @@
    <!-- Button on the right-->
    <div *ngIf="editUser">
        <button (click)='cancelEditMotionButton()' class='on-transition-fade' color="warn" mat-raised-button>
-            <span translate>Abort</span>
-            <fa-icon class="icon-text-distance" icon='times'></fa-icon>
+            <span translate>Cancel</span>
+            <mat-icon class="icon-text-distance">cancel</mat-icon>
        </button>
    </div>
    <div *ngIf="!editUser">
        <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="userExtraMenu">
-            <fa-icon icon='ellipsis-v'></fa-icon>
+            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

@ -102,7 +102,7 @@
                    [value]='user.initialPassword'>
                <mat-hint align="end">Generate</mat-hint>
                <button type="button" mat-button matSuffix mat-icon-button [disabled]='!newUser' (click)='generatePassword()'>
-                    <fa-icon icon='magic'></fa-icon>
+                    <mat-icon>sync_problem</mat-icon>
                </button>
            </mat-form-field>
        </div>
--- a/client/src/app/site/users/components/user-list/user-list.component.html
+++ b/client/src/app/site/users/components/user-list/user-list.component.html
@ -24,12 +24,12 @@
        <mat-cell *matCellDef="let user">
            <div class='groupsCell'>
                <span *ngIf="user.groups.length > 0">
-                    <fa-icon icon="users"></fa-icon>
+                    <mat-icon>people</mat-icon>
                    {{user.groups}}
                </span>
                <br *ngIf="user.groups && user.structureLevel">
                <span *ngIf="user.structureLevel">
-                    <fa-icon icon="flag"></fa-icon>
+                    <mat-icon>flag</mat-icon>
                    {{user.structureLevel}}
                </span>
            </div>
@ -41,7 +41,7 @@
        <mat-header-cell *matHeaderCellDef mat-sort-header> Presence </mat-header-cell>
        <mat-cell *matCellDef="let user">
            <div *ngIf="user.isActive">
-                <fa-icon icon="check-square"></fa-icon>
+                <mat-icon>check_box</mat-icon>
                <span translate>Present</span>
            </div>
        </mat-cell>
--- a/client/src/app/site/users/components/user-list/user-list.component.scss
+++ b/client/src/app/site/users/components/user-list/user-list.component.scss
@ -3,7 +3,7 @@
    vertical-align: middle;
    line-height: normal;

-    fa-icon {
+    mat-icon {
        font-size: 80%;
    }
 }
@ -20,7 +20,7 @@
    .mat-column-presence {
        flex: 0 0 60px;

-        fa-icon {
+        mat-icon {
            font-size: 100%;
            margin-right: 5px;
        }
--- a/client/src/app/site/users/components/user-list/user-list.component.ts
+++ b/client/src/app/site/users/components/user-list/user-list.component.ts
@ -23,18 +23,18 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
    public userMenuList = [
        {
            text: 'Groups',
-            icon: 'users',
+            icon: 'people',
            action: 'toGroups',
            perm: 'users.can_manage'
        },
        {
            text: 'Import',
-            icon: 'download',
+            icon: 'save_alt',
            action: 'toGroups'
        },
        {
            text: 'Export',
-            icon: 'file-export',
+            icon: 'archive',
            action: 'toGroups'
        }
    ];
--- a/client/src/app/site/users/users.config.ts
+++ b/client/src/app/site/users/users.config.ts
@ -14,7 +14,7 @@ export const UsersAppConfig: AppConfig = {
        {
            route: '/users',
            displayName: 'Participants',
-            icon: 'user',
+            icon: 'people',
            weight: 500,
            permission: 'users.can_see_name'
        }
--- a/client/src/assets/i18n/de.json
+++ b/client/src/assets/i18n/de.json
@ -1,5 +1,5 @@
 {
-    "Abort": "",
+    "Cancel": "",
    "About Me": "",
    "Category": "",
    "Change Password": "Passwort ändern",
--- a/client/src/assets/i18n/en.json
+++ b/client/src/assets/i18n/en.json
@ -1,5 +1,5 @@
 {
-    "Abort": "",
+    "Cancel": "",
    "About Me": "",
    "Category": "",
    "Change Password": "",
--- a/client/src/assets/i18n/fr.json
+++ b/client/src/assets/i18n/fr.json
@ -1,5 +1,5 @@
 {
-    "Abort": "",
+    "Cancel": "",
    "About Me": "",
    "Category": "",
    "Change Password": "",
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@ -12,9 +12,13 @@

@include angular-material-theme($openslides-theme);
@include openslides-components-theme($openslides-theme);
+
 * {
    font-family: Roboto, Arial, Helvetica, sans-serif;
 }
+mat-icon {
+    font-family: MaterialIcons-Regular;
+}

 body {
    // background: #e8eaed;