Merge pull request #1614 from nextcloud/bugfix/noid/actionbutton-alig…

…n-materialdesignicon

Quickfix for action button and material design icon

package.json

@@ -115,6 +115,7 @@
 		"vue-eslint-parser": "^7.1.0",
 		"vue-jest": "^3.0.5",
 		"vue-loader": "^15.9.1",
+		"vue-material-design-icons": "^4.11.0",
 		"vue-styleguidist": "^4.33.9",
 		"vue-template-compiler": "^2.6.11",
 		"webpack": "^4.42.1",

src/assets/action.scss

@@ -88,6 +88,16 @@
 			background-repeat: no-repeat;
 		}
 
+		.material-design-icon {
+			width: $clickable-area;
+			height: $clickable-area;
+			opacity: $opacity_full;
+
+			.material-design-icon__svg {
+				vertical-align: middle;
+			}
+		}
+
 		// long text area
 		p {
 			width: 185px;

src/components/ActionButton/ActionButton.vue

@@ -40,6 +40,42 @@ If you're using a long text you can specify a title
 		<ActionButton icon="icon-delete" title="Long button" @click="alert('Delete')">This button is associated with a very long text.\nAnd with new lines too.</ActionButton>
 	</Actions>
 ```
+
+You can also use a custom icon, for example from the vue-material-design-icons library:
+
+```vue
+<template>
+	<Actions>
+		<ActionButton>
+			<HandLeft
+				slot="icon"
+				:size="16"
+				decorative
+				title="" />
+			Raise left hand
+		</ActionButton>
+		<ActionButton>
+			<HandRight
+				slot="icon"
+				:size="16"
+				decorative
+				title="" />
+			Raise right hand
+		</ActionButton>
+	</Actions>
+</template>
+<script>
+import HandLeft from 'vue-material-design-icons/HandLeft'
+import HandRight from 'vue-material-design-icons/HandRight'
+
+export default {
+	components: {
+		HandLeft,
+		HandRight,
+	},
+}
+</script>
+```
 </docs>
 
 <template>