diff --git a/package-lock.json b/package-lock.json
index 1ae3bf95ef..e1b9f95683 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29917,6 +29917,12 @@
 				"vue-style-loader": "^4.1.0"
 			}
 		},
+		"vue-material-design-icons": {
+			"version": "4.11.0",
+			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.11.0.tgz",
+			"integrity": "sha512-3Tyeqi9jtONQ/x8WkJqiBs4t5Bd5O1t7RdM/GIPKVYoVdaRy0oy3nbRjnMGyONBlqC/NpPjzhWeoZWUMEI04nA==",
+			"dev": true
+		},
 		"vue-multiselect": {
 			"version": "2.1.6",
 			"resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",
diff --git a/package.json b/package.json
index 10e1df6a42..841a57225f 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/action.scss b/src/assets/action.scss
index a408fd2c95..b05126f2aa 100644
--- a/src/assets/action.scss
+++ b/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;
diff --git a/src/components/ActionButton/ActionButton.vue b/src/components/ActionButton/ActionButton.vue
index a3539fc761..91b46115e4 100644
--- a/src/components/ActionButton/ActionButton.vue
+++ b/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>