[F/OS] 🔘 Button Icon Extension - Android, Material and Custom Icons

:computer: Introduction

I was testing a couple of extensions and I realized that the Button Addon extension by Andres Cotes needs some updates, including the color of the icons, the sizes and some more. So I cooked up this extension to help you insert icons to your buttons. No assets for Android and Material, just download it, import it and you’re good.

image image image image

This extension offers four types of icons.

Icon Type Description Icons Available
Default Android’s default icons that you can use, available in a helper block. 67
Material Google’s Material Icons, available here. 2,500 +
Custom Your custom icons that you can add to your app! Unlimited
Font Icon fonts in your assets or ASD. Unlimited

The default icons that Android provides in the R.drawable class are kind of old, so I recommend you to use them only if you are making apps intending for old Android devices, or apps with the Classic theme, although you can technically use any icon for any theme.

Material Icons are icons provided by Google using material design, and if you want to build an app with professional UI, this should be for you. The biggest disadvantage of material icons is that you cannot test this feature with the Companion, and you must use the APK.

:chart_with_upwards_trend: Stats

:hammer_and_wrench: Built with: AppInventor Extensions Template

:clock1: Version: 2

:blue_book: Documentation

SetAndroidButtonIcons

image

Sets the icon of the specified button, using the default Android drawable icons. Use 0 if you do not want an icon to appear.

Parameters: component = component, leftIcon = Icon/number(int), topIcon = Icon/number(int), rightIcon = Icon/number(int), bottomIcon = Icon/number(int)

SetCustomButtonIcons

image

Sets the icon of the specified button. Use an empty text block if you do not want an icon to appear. Please use absolute paths in this instance.

Parameters: component = component, leftIcon = text, topIcon = text, rightIcon = text, bottomIcon = text

SetFontButtonIcons

image

Sets the button’s icons from the given icon font. Please use absolute or full paths in this instance. If you do not want an icon, use an empty text block.

Parameters: component = component, fontPath = text, leftIcon = text, topIcon = text, rightIcon = text, bottomIcon = text, color = color, size = number (int)

SetIconPadding

image

Sets the size of the padding between the icon and the text, in pixels.

Parameters: component = component, padding = number (int)

SetMaterialButtonIcons

image

Sets the material icon of the specified button. Use an empty text block if you do not want an icon to appear. The size of the icons should be in pixels.

Parameters: component = component, leftIcon = text, topIcon = text, rightIcon = text, bottomIcon = text, color = color, size = number (int)

:inbox_tray: Downloads

AIX (V2):
com.gordonlu.buttonicons.aix (190.2 KB)

AIA (V2):
ButtonIcons.aia (235.1 KB)

:books: FAQ

Q1: Does this extension support GIFs?

A1: No, unfortunately it does not. Try using a JPG or PNG image instead.

Q2: Is this extension open source?

A2: Yes of course! You can modify the code here in GitHub, but please give me a credit by linking to this topic and mentioning the author.

:+1: Credits

Thanks to @Kumaraswamy for helping me creating this extension and for his guidance, shout-out to him.

Also, thanks to @Shreyash for his guide on creating extensions, I’m using Extensions Template for the first time and this is only possible because of his guide.

Please click the beautiful :heart: Like button if you like the extension, it took a lot of effort and time to make it.

As I have exams from the 3rd to 13th in January, I definitely need a break from the builders. I’ll be back in 2 weeks. Please, if you have questions in those two weeks, drop a reply in this post and I’ll answer your questions after my exams. Goodbye.

Gute Rutsch! Happy New Year! 新年快樂!

4 Likes

Nice extension @Gordon :wink:. BTW, You can use Material Button with Start icon. But it’s useful for those who are still using a normal Button component.

Happy new year :heart:

2 Likes

@Gordon , Do you have a png image for your extension or your profile photo (little blurry) ? To add your extension in Extension store, we need it. It would be better if you can send me a circle cropped image

1 Like

Yes, this is my avatar, but I haven’t cropped it yet.

duck_profile

2 Likes

This extension is now available in Extension Store
Search “Button Icon” and Import it :grinning:

4 Likes