diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index c75d449f6e..9cccaab9b6 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Button } from '../button/Button';
 import { useEventListener, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { MinusIcon } from '../icons/minus';
+import { PlusIcon } from '../icons/plus';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 import { SpeedDialBase } from './SpeedDialBase';
-import { PlusIcon } from '../icons/plus';
-import { MinusIcon } from '../icons/minus';
 
 export const SpeedDial = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -225,6 +225,19 @@ export const SpeedDial = React.memo(
             const toggleIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props, visible });
             const content = <Button type="button" style={props.buttonStyle} className={className} icon={toggleIcon} onClick={onClick} disabled={props.disabled} aria-label={props['aria-label']} />;
 
+            if (props.buttonTemplate) {
+                const defaultContentOptions = {
+                    onClick,
+                    className,
+                    iconClassName,
+                    element: content,
+                    props,
+                    visible
+                };
+
+                return ObjectUtils.getJSXElement(props.buttonTemplate, defaultContentOptions);
+            }
+
             return content;
         };