# Adding Material Icon to a button **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [May 22, 2019, 9:26pm UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790 "2019-05-22T21:26:16Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 22, 2019, 9:26pm UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/1 "2019-05-22T21:26:16Z")
Hi all I have searched and followed videos on how to use material icon with buttons but I do not see any font typeface option within the button properties. Is there a video that demonstrates this for thunkable x? I am trying to accomplish below ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/9/e9a36c776dedd9962f06f8763be086566e6c9f73.png) Thanks ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [May 22, 2019, 11:27pm UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/2 "2019-05-22T23:27:46Z")
Hey @sysads, There is no Material icon font in Thunkable X, but as a workaround you can download the .png from the [material website](https://material.io/tools/icons/) and add it directly to your app. ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 23, 2019, 5:03am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/3 "2019-05-23T05:03:17Z")
Thanks but how do you add png to buttons. tried it but can’t add image as sub of button ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 23, 2019, 5:54am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/4 "2019-05-23T05:54:38Z")
In the “Designer” display, you will notice that each button description has an “Image” field (along with the Height, Width, Text Color, etc.). Just specify in there the name of the file that contains the image that you want your button to display. You will have to be careful with the proportions, as that image will completely fill the button, i…e. it will stretch it if need be. I found that processing the image with a “paint” utility of some sort will help. ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 23, 2019, 5:58am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/5 "2019-05-23T05:58:06Z")
Ah wait you are referring to app.thunkable and not x.thunkable? ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 23, 2019, 6:04am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/6 "2019-05-23T06:04:34Z")
Is x.thunkable different from app.thunkable in this respect? ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 23, 2019, 6:05am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/7 "2019-05-23T06:05:46Z")
Oh yes from what I discovered since yesterday. With app.thunkable, it has a lot more features than x.thunkable ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 23, 2019, 6:09am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/8 "2019-05-23T06:09:54Z")
Oh, rats… I just finished updating my (rather massive) app and was looking forward into porting it to iOS; I am making use of virtually all the features. That means I may have to forget about x.thunkable if I want to retain the same look and feel… We may be in the same boat. ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 23, 2019, 6:13am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/9 "2019-05-23T06:13:42Z")
I am also trying out app.thunkable to see how it works. But I do not see admob in app.thunkable. Is it available? ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 23, 2019, 6:25am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/10 "2019-05-23T06:25:16Z")
Yes, it is under the “Experimental” tab. I have a version of my app using it. You have AdMob Banner, and AdMob Interstitial available. ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 23, 2019, 6:28am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/11 "2019-05-23T06:28:16Z")
Ah OK seen it. I am stuck between thunkable x and thunkable classic. ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 23, 2019, 7:42am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/12 "2019-05-23T07:42:13Z")
It looks like there is no way around this ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 23, 2019, 8:42am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/13 "2019-05-23T08:42:24Z")
I will try to get familiar with the limitations of “x”. I have been googling trying to see if anyone has listed a summary of differences, but so far, no success in finding anything specific. One would be under the impression that “x” ought to duplicate what the “classic” does… ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 23, 2019, 8:43am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/14 "2019-05-23T08:43:50Z")
No luck, meet a brick wall with button not having text alignment for thunkable X hence can’t continue with project. Well will have to wait for more updates and return back to this. ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 23, 2019, 10:53pm UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/15 "2019-05-23T22:53:33Z")
I finally got around to check the features of “x”–I am not sure how to deal with those missing horizontal and vertical arrangements yet–but I have tried the “button” after bringing a “jpg” image in the “Files”, and specifying that file as “Background Picture” for the button, and it seems to work. Then, I converted the jpg to png, and loaded it up the same way. The screen display shows it properly. I haven’t tested how it would look on the android device, however; but as far as I can see, all seems to be working. ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 24, 2019, 6:42am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/16 "2019-05-24T06:42:59Z")
Hi could you share screenshot of how it looks. Would love to know how you did it and settings used ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 24, 2019, 7:23am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/17 "2019-05-24T07:23:31Z")
![Image%203](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/a/aa9ad0a238dcd6617823b93c949880d4cede2878.jpeg) Sure. Here it is. Button1 is selected, and I have the file “Barber45\_YK.png” (which is a white center surrounded by black and yellow barber stripes at 45 degree angle, hence the name) imported in the “Files” section on the left, and referenced as the “Background Picture” in the button specifics on the right. In the center, the screen display layout shows the button with the expected looks. Pretty straight forward, actually. ---
**Author:** ![sysads](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sysads/32/44975_2.png) [@sysads](https://community.thunkable.com/u/sysads)\ **Post date:** [May 24, 2019, 7:37am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/18 "2019-05-24T07:37:47Z")
Interesting but will that give me something like this. Button with text on left aligned and image right aligned? ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/9/e9a36c776dedd9962f06f8763be086566e6c9f73.png) ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 24, 2019, 8:00am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/19 "2019-05-24T08:00:44Z")
If you _make_ a file that has an image that look like this, yes. Screen capture the button you want if it exists, or make the image up using a drawing program and save it as a file, then import. I mean, you would get the caption “Quiz” and the video game console control icon as part of your image; then you do not need caption at all. The restriction is that you are stuck with the caption as it appears, can’t change font, font size, font colour, placement, etc. unless you have several files and have the app change the file button association. Or you make the button caption read "Quiz " (with plenty of trailing blank spaces) to force position; with the image being only of the icon–this may require quite a bit of trial and error to reach optimal positioning. Or you can have several buttons pre-defined, each with a different file, and play around with the visible property. ---
**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\ **Post date:** [May 24, 2019, 8:09am UTC](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790/20 "2019-05-24T08:09:56Z")
Alternatively, you could make TWO adjacent buttons, one with the Quiz caption, and one with the icon. Then you position them such that they seem to be one continuous button, by making the buttons bigger than the arrangement that contains them, so that they will have a clipped edge with no gap(!). Trust me, it works (at least in the classic thunkable), I use that clipping trick in my unit calculator app, so that I am not constrained by the overly generous margins of the button and can show a caption that reaches the apparent edge. Of course, then you have to process the two different buttons click in the same way on the blocks side. [Next page](https://community.thunkable.com/t/adding-material-icon-to-a-button/76790.md?page=2)