[core] Revert usage of material icons and use mdi-v5

* Fixed usage of old material-icons
* Added icons section to readme

README.md

@@ -1,17 +1,52 @@
-# Flaschengeist (flaschengeist-frontend)
+# Flaschengeist (frontend)
 
-Modular student club administration system.
+Modular student club administration system, licensed under the MIT license.
-Licensed under the MIT license.
 
-## Install the dependencies
+## Installation
+
+### Install the dependencies
 
 ```bash
 yarn install
 ```
 
-## Plugins
+### Configure Plugins
 
-### Build a Plugin
+You can activate and deactive Plugins in `src/boot/plugins.ts`.
+You have to set the name of the Plugin into `config.loadModules`.
+
+### Build the application
+
+```bash
+yarn quasar build
+```
+
+## Development
+
+### Icons used
+
+We are using the `mdi-v5` icon set, so feel free to use any icon from it.
+A list can be found [here](https://materialdesignicons.com/)
+
+### Commands useful for development
+
+#### Start the app in development mode
+
+Provides hot-code reloading, error reporting, etc.
+
+```bash
+yarn quasar dev
+```
+
+#### File linting
+
+```bash
+yarn run lint
+```
+
+### Plugins
+
+#### Build a Plugin
 
 A Flaschengeist-Frontend-Plugin should be placed in `src/plugins`.
 It needs a `plugin.ts` File which exports a plugin with the following interface:
@@ -20,32 +55,8 @@ It needs a `plugin.ts` File which exports a plugin with the following interface:
 name: string;
 mainRoutes?: PluginRouteConfig[];
 outRoutes?: PluginRouteConfig[];
-store?: Map<string, Module<any, StateInterface>>;
 requiredModules: string[];
 version: string;
 ```
 
 You have to import `FG_Plugin` from `plugins.d.ts`.
-
-### Configure Plugin
-
-You can activate and deactive Plugins in `src/boot/plugins.ts`. You have to set the name of the Plugin into `config.loadModules`.
-The order of the plugins is importend!
-
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
-
-```bash
-yarn quasar dev
-```
-
-### Lint the files
-
-```bash
-yarn run lint
-```
-
-### Build the app for production
-
-```bash
-yarn quasar build
-```

quasar.conf.js

@@ -37,16 +37,16 @@ module.exports = configure(function (/* ctx */) {
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
-      // 'ionicons-v4',
-      // 'mdi-v5',
-      // 'fontawesome-v5',
       // 'eva-icons',
-      // 'themify',
+      // 'fontawesome-v5',
+      // 'ionicons-v4',
       // 'line-awesome',
+      // 'material-icons',
+      'mdi-v5',
+      // 'themify',
+  
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
-
       'roboto-font', // optional, you are not bound to it
-      'material-icons', // optional, you are not bound to it
     ],
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
@@ -74,7 +74,7 @@ module.exports = configure(function (/* ctx */) {
       chainWebpack (chain) {
         chain.plugin('eslint-webpack-plugin')
           .use(ESLintPlugin, [{
-            extensions: [ 'js', 'vue' ],
+            extensions: [ 'ts', 'js', 'vue' ],
             exclude: 'node_modules'
           }])
         },
@@ -90,7 +90,7 @@ module.exports = configure(function (/* ctx */) {
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
-      iconSet: 'material-icons', // Quasar icon set
+      iconSet: 'mdi-v5', // Quasar icon set
       lang: 'de', // Quasar language pack
       config: {
         dark: 'auto',

src/layouts/MainLayout.vue

@@ -21,7 +21,7 @@
         </q-toolbar-title>
 
         <!-- Hier kommen die Shortlinks hin -->
-        <q-btn icon="message" flat dense
+        <q-btn icon="mdi-message-bulleted" flat dense
           ><q-badge color="negative" floating>{{ notifications.length }}</q-badge>
           <q-menu style="max-height: 400px; overflow: auto">
             <q-btn
@@ -81,7 +81,7 @@
           round
           unelevated
           color="secondary"
-          icon="chevron_left"
+          icon="mdi-menu-left"
           @click="leftDrawerMini = true"
         />
       </div>