Android Studio Import External Svg Icon With Padding (e.g. FontAwesome)

July 22, 2018

We can easily import Material Icon (Android Studio -> File -> New -> Vector Asset -> Asset Type: Clipart) with the default size of 24dp, black color with perfect padding.

When we import external svg icon such as Font Awesome (Asset Type: Local File (SVG, PSD)), there is no padding.

Change the import svg from

<vector
    android:height="24dp"
    android:viewportHeight="512"
    android:viewportWidth="448"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">

    <path android:fillColor="#FF000000" android:pathData="M436,480h-20L416,24c0,-13.255 -10.745,-24 -24,-24L56,0C42.745,0 32,10.745 32,24v456L12,480c-6.627,0 -12,5.373 -12,12v20h448v-20c0,-6.627 -5.373,-12 -12,-12zM128,76c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12L128,76zM128,172c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12v-40zM180,320h-40c-6.627,0 -12,-5.373 -12,-12v-40c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40c0,6.627 -5.373,12 -12,12zM256,480h-64v-84c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v84zM320,308c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12v-40c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40zM320,212c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12v-40c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40zM320,116c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12L256,76c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40z"/>

</vector>

to the following

  • Add <group> tag
  • Scale will how much padding (e.g 0.75 is 25% padding)
  • Pivot will center the icon, where pivotX is viewportWidth/2 and pivotY isviewportHeight/2.
<vector
    android:height="24dp"
    android:viewportHeight="512"
    android:viewportWidth="448"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">

    <group
        android:scaleX="0.75"
        android:scaleY="0.75"
        android:pivotX="224"
        android:pivotY="256">

        <path android:fillColor="#FF000000" android:pathData="M436,480h-20L416,24c0,-13.255 -10.745,-24 -24,-24L56,0C42.745,0 32,10.745 32,24v456L12,480c-6.627,0 -12,5.373 -12,12v20h448v-20c0,-6.627 -5.373,-12 -12,-12zM128,76c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12L128,76zM128,172c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12v-40zM180,320h-40c-6.627,0 -12,-5.373 -12,-12v-40c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40c0,6.627 -5.373,12 -12,12zM256,480h-64v-84c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v84zM320,308c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12v-40c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40zM320,212c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12v-40c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40zM320,116c0,6.627 -5.373,12 -12,12h-40c-6.627,0 -12,-5.373 -12,-12L256,76c0,-6.627 5.373,-12 12,-12h40c6.627,0 12,5.373 12,12v40z"/>

    </group>
</vector>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.