background color of angular-fontawesome icons not scalling

Issue

Im using angular-fontawesome and want to change the background color of an font-awesome fa-icon

 <fa-icon 
    class="vue-icon"
    [icon]="faVue"
    ></fa-icon>

I changed the color using the class attribute

.vue-icon {
    padding: 10px;
    background: #62dda4;
}

If I use the size attribute to make the icon bigger the bg is only half filled

 <fa-icon 
    class="vue-icon"
    [icon]="faVue" 
    size="6x"
    ></fa-icon>

what causes this behavior ?
so far I could not found a background property from the library

Solution

Try giving it a block property to contain it.

.vue-icon {
  display: inline-block; /* add this line*/
  padding: 10px;
  background: #62dda4;
}

Answered By - Gurkan Yesilyurt