Added different sizes to iconbutton and adjusted the baseline of it

src/renderer/components/Button.vue

@@ -7,6 +7,7 @@
 
 <script>
 export default {
+  name: 'Button',
   data () {
     return {
       className: `button--` + this.variant

src/renderer/components/IconButton.vue

@@ -1,5 +1,6 @@
 <template>
   <a href="#" role="button" class="icon-button" :class="className">
+    <slot name="icon"></slot>
     <slot></slot>
   </a>
 </template>
@@ -20,44 +21,59 @@ export default {
 
 <style lang="sass" scoped>
 .icon-button 
-  font-size: .9rem
+  display: flex
+  justify-content: center
+  align-items: center
+  width: 38px
+  height: 38px
   text-decoration: none
-  padding: .5rem 1rem
   text-transform: capitalize
-  border-radius: .375rem
+  border-radius: 100%
   transition: background-color 200ms
   box-sizing: border-box
   outline: unset
+  color: grey
+  transition: all .2s ease-in-out
+  &.large
+    width: 48px
+    height: 48px
+    svg
+        width: 32px
+        height: 32px    
+  &.small
+    width: 32px
+    height: 32px
+    svg
+        width: 14px
+        height: 14px    
+  svg
+    width: 24px
+    height: 24px
+    transition: fill 200ms
+    fill: gray
+  &:hover
+    background-color: rgba(0,0,0,0.05)
+  &:focus,&:active
+    background-color: rgba(0,0,0,.15)
+
   &--contained 
     background-color: #0076F9
     color: white
     font-weight: 600
+    svg
+        fill: white
     &:hover
       background-color: lighten(#0076F9,5)
     &:focus,&:active
       background-color: darken(#0076F9,5)
 
-  svg
-    width: 14px
-    height: 14px
-    fill: white
-    transition: fill 200ms
-
-  &--flat 
-    color: grey
-    transition: all .2s ease-in-out
-    svg
-      fill: gray
-    &:hover
-      background-color: rgba(0,0,0,0.05)
-    &:focus,&:active
-      background-color: rgba(0,0,0,.15)
-
   &--raised 
     background-color: #0076F9
     color: white
     font-weight: 600
     box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
+    svg
+        fill: white
     &:hover
       background-color: lighten(#0076F9,5)
     &:focus,&:active

src/renderer/layouts/PlayerBar.vue

@@ -14,7 +14,16 @@
             <p class="remainingTime">{{duration}}</p>
         </div>
         <div class="control-buttons">
-            <IconButton variant="outlined">
+            <IconButton >
+               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+            </IconButton>
+            <IconButton variant="contained">
+               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+            </IconButton>
+            <IconButton variant="raised large">
+               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+            </IconButton>
+            <IconButton variant="outlined small">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
             </IconButton>
             <div class="play-pause-button" @click="togglePlay">