Use material design icon for settings icon

Signed-off-by: Raimund Schlüßler <[email protected]>

src/components/AppNavigationSettings/AppNavigationSettings.vue

@@ -26,10 +26,11 @@
 		:class="{ open }">
 		<div id="app-settings-header">
 			<button
-				class="settings-button"
+				class="settings-button-vue"
 				type="button"
 				@click="toggleMenu">
-				{{ title }}
+				<Cog class="settings-button-vue__icon" :size="24" decorative />
+				<span class="settings-button-vue__label">{{ title }}</span>
 			</button>
 		</div>
 		<transition name="slide-up">
@@ -45,10 +46,15 @@ import { directive as ClickOutside } from 'v-click-outside'
 import { t } from '../../l10n'
 import { excludeClickOutsideClasses } from '../../mixins'
 
+import Cog from 'vue-material-design-icons/Cog.vue'
+
 export default {
 	directives: {
 		ClickOutside,
 	},
+	components: {
+		Cog,
+	},
 	mixins: [
 		excludeClickOutsideClasses,
 	],
@@ -79,6 +85,41 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+#app-settings-header {
+	.settings-button-vue {
+		display: flex;
+		flex: 1 1 0;
+		height: $clickable-area;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		background-color: var(--color-main-background);
+		box-shadow: none;
+		border: 0;
+		border-radius: 0;
+		text-align: left;
+		font-weight: normal;
+		font-size: 100%;
+		opacity: 0.8;
+		color: var(--color-main-text);
+		padding-right: 14px;
+		line-height: $clickable-area;
+
+		&__icon {
+			width: $clickable-area;
+			height: $clickable-area;
+			min-width: $clickable-area;
+		}
+		&__label {
+			overflow: hidden;
+			max-width: 100%;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			padding-left: 6px;
+		}
+	}
+}
+
 #app-settings-content {
 	display: block;
 	padding: 10px;