diff --git a/src/components/ActionButton/ActionButton.vue b/src/components/ActionButton/ActionButton.vue
index 429e4bf50c..037bb8ebee 100644
--- a/src/components/ActionButton/ActionButton.vue
+++ b/src/components/ActionButton/ActionButton.vue
@@ -69,9 +69,6 @@ If you're using a long text you can specify a title
 	<template>
 		<Actions>
 			<ActionButton icon="icon-add" @click="showMessage('Add')">
-				<template #icon>
-					<Plus :size="20" />
-				</template>
 				Add new
 			</ActionButton>
 			<ActionButton title="Long button" @click="showMessage('Delete')">
@@ -84,12 +81,10 @@ If you're using a long text you can specify a title
 	</template>
 	<script>
 	import Delete from 'vue-material-design-icons/Delete'
-	import Plus from 'vue-material-design-icons/Plus'
 
 	export default {
 		components: {
 			Delete,
-			Plus,
 		},
 		methods: {
 			showMessage(msg) {
@@ -101,6 +96,28 @@ If you're using a long text you can specify a title
 
 ```
 
+Action icon attribute with a single action
+
+```vue
+	<template>
+		<Actions>
+			<ActionButton icon="icon-add" @click="showMessage('Add')">
+				Add new
+			</ActionButton>
+		</Actions>
+	</template>
+	<script>
+	export default {
+		methods: {
+			showMessage(msg) {
+				alert(msg)
+			},
+		},
+	}
+	</script>
+
+```
+
 You can also use a custom icon, for example from the vue-material-design-icons library:
 
 ```vue
diff --git a/src/components/Actions/Actions.vue b/src/components/Actions/Actions.vue
index bc8887d841..df0c3c60cd 100644
--- a/src/components/Actions/Actions.vue
+++ b/src/components/Actions/Actions.vue
@@ -739,6 +739,8 @@ export default {
 						'action-item action-item--single',
 						firstAction?.data?.staticClass,
 						firstAction?.data?.class,
+						// use icon attribute as class if icon slot is not used
+						icon ? undefined : firstAction?.componentOptions?.propsData?.icon,
 					],
 					attrs: {
 						'aria-label': firstAction?.componentOptions?.propsData?.ariaLabel || firstAction?.componentOptions?.children?.[0]?.text,