diff --git a/src/lib/src/framework-library/material-design-framework/material-add-reference.component.ts b/src/lib/src/framework-library/material-design-framework/material-add-reference.component.ts
index 461ed181..7961eaa0 100755
--- a/src/lib/src/framework-library/material-design-framework/material-add-reference.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-add-reference.component.ts
@@ -8,6 +8,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
   template: `
     <section [class]="options?.htmlClass || ''" align="end">
       <button mat-raised-button *ngIf="showAddButton"
+		[class]="options?.fieldHtmlClass"
         [color]="options?.color || 'accent'"
         [disabled]="options?.readonly"
         (click)="addItem($event)">
diff --git a/src/lib/src/framework-library/material-design-framework/material-button-group.component.ts b/src/lib/src/framework-library/material-design-framework/material-button-group.component.ts
index 9beaf56d..f0686c4d 100755
--- a/src/lib/src/framework-library/material-design-framework/material-button-group.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-button-group.component.ts
@@ -16,6 +16,7 @@ import { buildTitleMap } from '../../shared';
           [innerHTML]="options?.title"></label>
       </div>
       <mat-button-toggle-group
+		[class]="options?.fieldHtmlClass"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
diff --git a/src/lib/src/framework-library/material-design-framework/material-checkbox.component.ts b/src/lib/src/framework-library/material-design-framework/material-checkbox.component.ts
index 82a2b60c..61f8409c 100755
--- a/src/lib/src/framework-library/material-design-framework/material-checkbox.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-checkbox.component.ts
@@ -8,6 +8,7 @@ import { hasOwn } from './../../shared/utility.functions';
   selector: 'material-checkbox-widget',
   template: `
     <mat-checkbox *ngIf="boundControl && !showSlideToggle"
+	[class]="options?.htmlClass"
       [formControl]="formControl"
       align="left"
       [color]="options?.color || 'primary'"
@@ -21,6 +22,7 @@ import { hasOwn } from './../../shared/utility.functions';
         [innerHTML]="options?.title"></span>
     </mat-checkbox>
     <mat-checkbox *ngIf="!boundControl && !showSlideToggle"
+	[class]="options?.htmlClass"
       align="left"
       [color]="options?.color || 'primary'"
       [disabled]="controlDisabled || options?.readonly"
@@ -37,6 +39,7 @@ import { hasOwn } from './../../shared/utility.functions';
     </mat-checkbox>
     <mat-slide-toggle *ngIf="boundControl && showSlideToggle"
       [formControl]="formControl"
+	  [class]="options?.htmlClass"
       align="left"
       [color]="options?.color || 'primary'"
       [id]="'control' + layoutNode?._id"
@@ -50,6 +53,7 @@ import { hasOwn } from './../../shared/utility.functions';
     </mat-slide-toggle>
     <mat-slide-toggle *ngIf="!boundControl && showSlideToggle"
       align="left"
+	  [class]="options?.htmlClass"
       [color]="options?.color || 'primary'"
       [disabled]="controlDisabled || options?.readonly"
       [id]="'control' + layoutNode?._id"
diff --git a/src/lib/src/framework-library/material-design-framework/material-checkboxes.component.ts b/src/lib/src/framework-library/material-design-framework/material-checkboxes.component.ts
index aa995ba1..db2e07ca 100755
--- a/src/lib/src/framework-library/material-design-framework/material-checkboxes.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-checkboxes.component.ts
@@ -12,6 +12,7 @@ import { buildFormGroup, buildTitleMap, hasOwn, JsonPointer } from '../../shared
   template: `
     <div>
       <mat-checkbox type="checkbox"
+	  [class]="options?.htmlClass"
         [checked]="allChecked"
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
@@ -30,6 +31,7 @@ import { buildFormGroup, buildTitleMap, hasOwn, JsonPointer } from '../../shared
         <li *ngFor="let checkboxItem of checkboxList"
           [class]="options?.htmlClass || ''">
           <mat-checkbox type="checkbox"
+		  [class]="options?.htmlClass"
             [(ngModel)]="checkboxItem.checked"
             [color]="options?.color || 'primary'"
             [disabled]="controlDisabled || options?.readonly"
diff --git a/src/lib/src/framework-library/material-design-framework/material-datepicker.component.ts b/src/lib/src/framework-library/material-design-framework/material-datepicker.component.ts
index 34f27ebf..4ce825ee 100755
--- a/src/lib/src/framework-library/material-design-framework/material-datepicker.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-datepicker.component.ts
@@ -11,6 +11,7 @@ import { dateToString, hasOwn, stringToDate } from '../../shared';
       <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
         [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
       <input matInput *ngIf="boundControl"
+		[class]="options?.fieldHtmlClass"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
@@ -25,6 +26,7 @@ import { dateToString, hasOwn, stringToDate } from '../../shared';
         [style.width]="'100%'"
         (blur)="options.showErrors = true">
       <input matInput *ngIf="!boundControl"
+		[class]="options?.fieldHtmlClass"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
diff --git a/src/lib/src/framework-library/material-design-framework/material-input.component.ts b/src/lib/src/framework-library/material-design-framework/material-input.component.ts
index c69a03e3..739179e5 100755
--- a/src/lib/src/framework-library/material-design-framework/material-input.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-input.component.ts
@@ -13,6 +13,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
       <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
         [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
       <input matInput *ngIf="boundControl"
+		[class]="options?.fieldHtmlClass" 
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
@@ -28,6 +29,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
         [type]="layoutNode?.type"
         (blur)="options.showErrors = true">
       <input matInput *ngIf="!boundControl"
+		[class]="options?.fieldHtmlClass"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
         [attr.maxlength]="options?.maxLength"
diff --git a/src/lib/src/framework-library/material-design-framework/material-number.component.ts b/src/lib/src/framework-library/material-design-framework/material-number.component.ts
index b2036866..f02132e8 100755
--- a/src/lib/src/framework-library/material-design-framework/material-number.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-number.component.ts
@@ -13,6 +13,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
       <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
         [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
       <input matInput *ngIf="boundControl"
+		[class]="options?.fieldHtmlClass"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.max]="options?.maximum"
@@ -27,6 +28,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
         [type]="'number'"
         (blur)="options.showErrors = true">
       <input matInput *ngIf="!boundControl"
+		[class]="options?.fieldHtmlClass"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.max]="options?.maximum"
         [attr.min]="options?.minimum"
diff --git a/src/lib/src/framework-library/material-design-framework/material-radios.component.ts b/src/lib/src/framework-library/material-design-framework/material-radios.component.ts
index 2e2717ef..b9495f68 100755
--- a/src/lib/src/framework-library/material-design-framework/material-radios.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-radios.component.ts
@@ -16,6 +16,7 @@ import { buildTitleMap } from '../../shared';
           [innerHTML]="options?.title"></label>
       </div>
       <mat-radio-group *ngIf="boundControl"
+		[class]="options?.fieldHtmlClass"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
@@ -30,6 +31,7 @@ import { buildTitleMap } from '../../shared';
         </mat-radio-button>
       </mat-radio-group>
       <mat-radio-group *ngIf="!boundControl"
+		[class]="options?.fieldHtmlClass"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
diff --git a/src/lib/src/framework-library/material-design-framework/material-select.component.ts b/src/lib/src/framework-library/material-design-framework/material-select.component.ts
index f1f66bed..4aedee7b 100755
--- a/src/lib/src/framework-library/material-design-framework/material-select.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-select.component.ts
@@ -14,6 +14,7 @@ import { buildTitleMap, isArray } from '../../shared';
       <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
         [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
       <mat-select *ngIf="boundControl"
+		[class]="options?.fieldHtmlClass"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.name]="controlName"
@@ -38,6 +39,7 @@ import { buildTitleMap, isArray } from '../../shared';
         </ng-template>
       </mat-select>
       <mat-select *ngIf="!boundControl"
+		[class]="options?.fieldHtmlClass"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.name]="controlName"
         [disabled]="controlDisabled || options?.readonly"
diff --git a/src/lib/src/framework-library/material-design-framework/material-slider.component.ts b/src/lib/src/framework-library/material-design-framework/material-slider.component.ts
index 8b39a132..a20dffb8 100755
--- a/src/lib/src/framework-library/material-design-framework/material-slider.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-slider.component.ts
@@ -7,6 +7,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
   selector: 'material-slider-widget',
   template: `
     <mat-slider thumbLabel *ngIf="boundControl"
+	[class]="options?.fieldHtmlClass"
       [formControl]="formControl"
       [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
       [id]="'control' + layoutNode?._id"
@@ -16,6 +17,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
       [style.width]="'100%'"
       (blur)="options.showErrors = true"></mat-slider>
     <mat-slider thumbLabel *ngIf="!boundControl"
+	[class]="options?.fieldHtmlClass"
       [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
       [disabled]="controlDisabled || options?.readonly"
       [id]="'control' + layoutNode?._id"
diff --git a/src/lib/src/framework-library/material-design-framework/material-textarea.component.ts b/src/lib/src/framework-library/material-design-framework/material-textarea.component.ts
index b6206de5..01f14f15 100755
--- a/src/lib/src/framework-library/material-design-framework/material-textarea.component.ts
+++ b/src/lib/src/framework-library/material-design-framework/material-textarea.component.ts
@@ -13,6 +13,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
       <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
         [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
       <textarea matInput *ngIf="boundControl"
+		[class]="options?.fieldHtmlClass"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
@@ -27,6 +28,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
         [style.width]="'100%'"
         (blur)="options.showErrors = true"></textarea>
       <textarea matInput *ngIf="!boundControl"
+		[class]="options?.fieldHtmlClass"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
         [attr.maxlength]="options?.maxLength"