diff --git a/lib/core/src/lib/avatar/avatar.component.md b/lib/core/src/lib/avatar/avatar.component.md
index 473626f80f..5a87f7942b 100644
--- a/lib/core/src/lib/avatar/avatar.component.md
+++ b/lib/core/src/lib/avatar/avatar.component.md
@@ -58,11 +58,11 @@ import { AvatarComponent } from '@alfresco/adf-core';
 
 The following CSS classes are available for theming:
 
-| Name                   | Description           |
-|------------------------|-----------------------|
-| `adf-avatar`           | The host element.     |
-| `adf-avatar__image`    | The image element.    |
-| `adf-avatar__initials` | The initials element. |
+| Name                    | Description           |
+|-------------------------|-----------------------|
+| `adf-avatar`            | The host element.     |
+| `.adf-avatar__image`    | The image element.    |
+| `.adf-avatar__initials` | The initials element. |
 
 ### CSS Variables
 
diff --git a/lib/core/src/lib/button/button.component.html b/lib/core/src/lib/button/button.component.html
index 4c1f8c3a8b..bfea52d7b3 100644
--- a/lib/core/src/lib/button/button.component.html
+++ b/lib/core/src/lib/button/button.component.html
@@ -2,8 +2,9 @@
     <ng-container *ngSwitchDefault>
         <button
             mat-button
-            [id]="uid"
-            [title]="tooltip"
+            class="adf-button__content"
+            [attr.id]="uid"
+            [attr.title]="tooltip"
             [color]="color"
             [disabled]="disabled"
             [disableRipple]="disableRipple"
@@ -18,8 +19,9 @@
     <ng-container *ngSwitchCase="'raised'">
         <button
             mat-raised-button
-            [id]="uid"
-            [title]="tooltip"
+            class="adf-button__content"
+            [attr.id]="uid"
+            [attr.title]="tooltip"
             [color]="color"
             [disabled]="disabled"
             [disableRipple]="disableRipple"
@@ -34,8 +36,9 @@
     <ng-container *ngSwitchCase="'stroked'">
         <button
             mat-stroked-button
-            [id]="uid"
-            [title]="tooltip"
+            class="adf-button__content"
+            [attr.id]="uid"
+            [attr.title]="tooltip"
             [color]="color"
             [disabled]="disabled"
             [disableRipple]="disableRipple"
@@ -50,8 +53,9 @@
     <ng-container *ngSwitchCase="'flat'">
         <button
             mat-flat-button
-            [id]="uid"
-            [title]="tooltip"
+            class="adf-button__content"
+            [attr.id]="uid"
+            [attr.title]="tooltip"
             [color]="color"
             [disabled]="disabled"
             [disableRipple]="disableRipple"
@@ -66,8 +70,9 @@
     <ng-container *ngSwitchCase="'icon'">
         <button
             mat-icon-button
-            [id]="uid"
-            [title]="tooltip"
+            class="adf-button__content"
+            [attr.id]="uid"
+            [attr.title]="tooltip"
             [color]="color"
             [disabled]="disabled"
             [disableRipple]="disableRipple"
@@ -75,14 +80,15 @@
             [attr.aria-hidden]="ariaHidden"
             [attr.data-automation-id]="testId"
         >
-            <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
-            <ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
+            <mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
+            <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
         </button>
     </ng-container>
 
     <ng-container *ngSwitchCase="'fab'">
         <button
             mat-fab
+            class="adf-button__content"
             [id]="uid"
             [title]="tooltip"
             [color]="color"
@@ -92,7 +98,7 @@
             [attr.aria-hidden]="ariaHidden"
             [attr.data-automation-id]="testId"
         >
-            <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+            <mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
             <ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
         </button>
     </ng-container>
@@ -100,6 +106,7 @@
     <ng-container *ngSwitchCase="'mini-fab'">
         <button
             mat-mini-fab
+            class="adf-button__content"
             [id]="uid"
             [title]="tooltip"
             [color]="color"
@@ -109,7 +116,7 @@
             [attr.aria-hidden]="ariaHidden"
             [attr.data-automation-id]="testId"
         >
-            <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+            <mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
             <ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
         </button>
     </ng-container>
diff --git a/lib/core/src/lib/button/button.component.md b/lib/core/src/lib/button/button.component.md
index 4e97a8dda5..6487758e01 100644
--- a/lib/core/src/lib/button/button.component.md
+++ b/lib/core/src/lib/button/button.component.md
@@ -80,3 +80,22 @@ The button component has been designed to be accessible. The following attribute
 | Name    | Description                         |
 |---------|-------------------------------------|
 | `click` | Emitted when the button is clicked. |
+
+
+## Theming
+
+The following CSS classes are available for theming:
+
+| Name                   | Description                 |
+|------------------------|-----------------------------|
+| `adf-button`           | The host element.           |
+| `.adf-button__content` | The button content element. |
+| `.adf-button__icon`    | The icon element.           |
+
+### CSS Variables
+
+The following CSS variables are available for theming:
+
+| Name                     | Default | Description   |
+|--------------------------|---------|---------------|
+| `--adf-button-icon-size` | `24px`  | The icon size |
diff --git a/lib/core/src/lib/button/button.component.scss b/lib/core/src/lib/button/button.component.scss
index 58f5df3175..65caa1efeb 100644
--- a/lib/core/src/lib/button/button.component.scss
+++ b/lib/core/src/lib/button/button.component.scss
@@ -1,3 +1,13 @@
 adf-button {
     // custom styles
+
+    .adf-button__content {
+        // custom styles
+    }
+
+    .adf-button__icon {
+        font-size: var(--adf-button-icon-size, 24px);
+        width: var(--adf-button-icon-size, 24px);
+        height: var(--adf-button-icon-size, 24px);
+    }
 }
diff --git a/lib/core/src/lib/button/button.component.ts b/lib/core/src/lib/button/button.component.ts
index 065fcf94f0..0c2c5d0e1b 100644
--- a/lib/core/src/lib/button/button.component.ts
+++ b/lib/core/src/lib/button/button.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { ThemePalette } from '@angular/material/core';
@@ -43,4 +43,8 @@ export class ButtonComponent {
     @Input() ariaLabel?: string;
     @Input() ariaHidden?: boolean;
     @Input() testId?: string;
+
+    @HostBinding('style.--adf-button-icon-size')
+    @Input()
+    iconSize = getComputedStyle(document.documentElement).getPropertyValue('--adf-button-icon-size');
 }