diff --git a/packages/components/src/dashicon/icon-class.js b/packages/components/src/dashicon/icon-class.js
index f82b6453ef68e9..a0787f3f04a8ad 100644
--- a/packages/components/src/dashicon/icon-class.js
+++ b/packages/components/src/dashicon/icon-class.js
@@ -1,4 +1,3 @@
-export const IconClass = ( props ) => {
-	const { icon, className } = props;
+export const IconClass = ( icon, className ) => {
 	return [ 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' );
 };
diff --git a/packages/components/src/dashicon/icon-class.native.js b/packages/components/src/dashicon/icon-class.native.js
index 09a798008ea1c0..498cf5e3c2f07f 100644
--- a/packages/components/src/dashicon/icon-class.native.js
+++ b/packages/components/src/dashicon/icon-class.native.js
@@ -1,4 +1,3 @@
-export const IconClass = ( props ) => {
-	const { icon, className, ariaPressed } = props;
+export const IconClass = ( icon, className, ariaPressed ) => {
 	return [ ariaPressed ? 'dashicon-active' : 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' );
 };
diff --git a/packages/components/src/dashicon/index.js b/packages/components/src/dashicon/index.js
index 943282bc7d3e02..ca5524d1bb8264 100644
--- a/packages/components/src/dashicon/index.js
+++ b/packages/components/src/dashicon/index.js
@@ -27,7 +27,7 @@ export default class Dashicon extends Component {
 	}
 
 	render() {
-		const { icon, size = 20 } = this.props;
+		const { icon, size = 20, className, ariaPressed, ...extraProps } = this.props;
 		let path;
 
 		switch ( icon ) {
@@ -901,7 +901,7 @@ export default class Dashicon extends Component {
 			return null;
 		}
 
-		const iconClass = IconClass( this.props );
+		const iconClass = IconClass( icon, className, ariaPressed );
 
 		return (
 			<SVG
@@ -913,6 +913,7 @@ export default class Dashicon extends Component {
 				width={ size }
 				height={ size }
 				viewBox="0 0 20 20"
+				{ ...extraProps }
 			>
 				<Path d={ path } />
 			</SVG>
diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js
index 7b0a4ae3541a9a..0e9941d986b6ac 100644
--- a/packages/components/src/icon-button/index.js
+++ b/packages/components/src/icon-button/index.js
@@ -20,7 +20,7 @@ import Dashicon from '../dashicon';
 // is common to apply a ref to the button element (only supported in class)
 class IconButton extends Component {
 	render() {
-		const { icon, children, label, className, tooltip, shortcut, labelPosition, ...additionalProps } = this.props;
+		const { icon, children, label, className, tooltip, shortcut, labelPosition, iconProps, ...additionalProps } = this.props;
 		const { 'aria-pressed': ariaPressed } = this.props;
 		const classes = classnames( 'components-icon-button', className, {
 			'has-text': children,
@@ -45,7 +45,7 @@ class IconButton extends Component {
 
 		let element = (
 			<Button aria-label={ label } { ...additionalProps } className={ classes }>
-				{ isString( icon ) ? <Dashicon icon={ icon } ariaPressed={ ariaPressed } /> : icon }
+				{ isString( icon ) ? <Dashicon icon={ icon } ariaPressed={ ariaPressed } { ...iconProps } /> : icon }
 				{ children }
 			</Button>
 		);
diff --git a/packages/components/src/toolbar-button/index.js b/packages/components/src/toolbar-button/index.js
index 8c2374b0284d1d..9f4968a5ad92bc 100644
--- a/packages/components/src/toolbar-button/index.js
+++ b/packages/components/src/toolbar-button/index.js
@@ -19,8 +19,8 @@ function ToolbarButton( {
 	className,
 	isActive,
 	isDisabled,
-	extraProps,
 	children,
+	...extraProps
 } ) {
 	return (
 		<ToolbarButtonContainer className={ containerClassName }>