Add ripple prop to m-icon-button (#85)

Author: raphpare

src/components/icon-button/icon-button.html

@@ -4,6 +4,7 @@
                'm--is-skin-dark': isSkinDark,
                'm--is-skin-primary': isSkinPrimary,
                'm--is-skin-secondary': isSkinSecondary,
+               'm--has-ripple': ripple,
                'm--is-disabled': disabled }"
         :disabled="disabled"
         type="button"

src/components/icon-button/icon-button.scss

@@ -14,6 +14,12 @@
         outline: none;
     }
 
+    &.m--has-ripple {
+        &::before {
+            content: '';
+        }
+    }
+
     &:not(.m--is-disabled) {
         &.m--is-skin-light,
         &.m--is-skin-link,
@@ -26,7 +32,6 @@
                 top: 50%;
                 left: 50%;
                 z-index: 0;
-                content: '';
                 display: block;
                 width: $m-touch-size / 2;
                 height: $m-touch-size / 2;

src/components/icon-button/icon-button.ts

@@ -34,6 +34,8 @@ export class MIconButton extends Vue {
     public iconName: string;
     @Prop({ default: '20px' })
     public iconSize: string;
+    @Prop({ default: true })
+    public ripple: boolean;
     @Prop()
     public title: string;