Material-components-android: [Chip] doesn't support only icon

Created on 6 Jul 2019  路  4Comments  路  Source: material-components/material-components-android

When I set an icon, there is space on the right. If there is no text, the text field can be hidden

Most helpful comment

When I set an icon, there is space on the right. If there is no text, the text field can be hidden

Try this example

<com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            app:chipIcon="@drawable/ic_your_drawable"
            app:textStartPadding="0dp"
            app:textEndPadding="0dp"
            app:chipStartPadding="4dp"
            app:chipEndPadding="4dp" />

All 4 comments

@Narinc have you tried creating an icon only chip style that removes the leading and trailing text padding? By default the chip styles expect text to be displayed.

This is the feedback from the Material designers

No, users should not be creating chips with only an icon. Chips are meant to be actionable, without accompaniment of text a chip's utility may become unclear to the user. The anatomy of a chip contains thumbnail (icon), text, and a remove Icon. Of these elements, the only mandatory piece is the text. More details found in the Chip article:

https://material.io/design/components/chips.html#anatomy

Could you use the icon version of MaterialButton if you really need something that's just an icon?

I disagree. I have a use case in which I have action chips in my collapsible toolbar which show text when it is expanded but I would like to collapse them on scroll. I cannot do that right now and I think that's a pretty legitimate and clear use case.

When I set an icon, there is space on the right. If there is no text, the text field can be hidden

Try this example

<com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            app:chipIcon="@drawable/ic_your_drawable"
            app:textStartPadding="0dp"
            app:textEndPadding="0dp"
            app:chipStartPadding="4dp"
            app:chipEndPadding="4dp" />
Was this page helpful?
0 / 5 - 0 ratings