Advertisement


Why buttons without icons in Material Design


Question

In Google's Material Design, do the guidelines prefer buttons without icons next to text? On http://www.google.com/design/spec/components/buttons.html no such examples can be found. Is it written somewhere why?

(I know the floating action button or paper icon button have icons; I'm talking about text buttons.)

2015/01/22
1
5
1/22/2015 9:39:00 PM

Accepted Answer

According to the developer pages (http://developer.android.com/design/building-blocks/buttons.html):

Both an icon and text is most appropriate when they complement each other: each carrying its own bit of information, but together making a larger whole.

This may be the contributing factor in the design guide where no such example is present

2015/01/18
5
1/18/2015 7:06:00 AM

I might be late to this. But in Material Design website it does have a sample of it.

In most cases I think text only or icon only are sufficient to describe what it does. I came across a scenario where the button text describes the item that user is selecting and button icon describes what happens when the button is clicked. It seems more 'instructive' to me. But I may be wrong.

The following examples are from Material Design website.

Do.
Use icons that clearly communicate their meaning.

Don’t.
Don’t vertically align an icon and text in the center of a contained button.

Don’t.
Don’t use two icons in the same button.

2019/09/23