diff --git a/core/src/components/fab/fab.scss b/core/src/components/fab/fab.scss
index 29aa6bd5de..78434e1c06 100644
--- a/core/src/components/fab/fab.scss
+++ b/core/src/components/fab/fab.scss
@@ -34,20 +34,22 @@
 
 :host(.fab-vertical-top) {
   top: $fab-content-margin;
-
-  &.fab-edge {
-    top: -$fab-size / 2;
-  }
 }
 
+:host(.fab-vertical-top.fab-edge) {
+  top: -$fab-size / 2;
+}
+
+
 :host(.fab-vertical-bottom) {
   bottom: $fab-content-margin;
-
-  &.fab-edge {
-    bottom: -$fab-size / 2;
-  }
 }
 
+:host(.fab-vertical-bottom.fab-edge) {
+  bottom: -$fab-size / 2;
+}
+
+
 :host(.fab-vertical-center) {
   @include margin(-$fab-size / 2, null, null, null);
 
diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx
index f4cf73e53e..9403523724 100644
--- a/core/src/components/fab/fab.tsx
+++ b/core/src/components/fab/fab.tsx
@@ -66,7 +66,7 @@ export class Fab {
       class: {
         [`fab-horizontal-${this.horizontal}`]: !!this.horizontal,
         [`fab-vertical-${this.vertical}`]: !!this.vertical,
-        ['fab-edge']: this.edge
+        'fab-edge': this.edge
       }
     };
   }