Material 3 Icon Button

Overview

Icon buttons enable compact, interactive actions with a single tap.

Material 3 Icon Buttons, using MaterialButton, support Default and Toggle variants with four styles (Filled, Filled Tonal, Outlined, Standard), five sizes, three widths, and shape morphing per the Material 3 Expressive update. Ideal for toolbars or tight spaces, they use icons (e.g., boat) for actions like navigation. This guide covers implementation, accessibility, and theming.

Getting Started

• Add Material Components for Android library dependency
• Use Button with Theme.Material3.* for auto-inflation to MaterialButton
• Apply styles for Filled, Filled Tonal, Outlined, or Standard icon buttons

Accessibility

• Set android:contentDescription (e.g., "Navigate by boat") for TalkBack
• Ensure 48dp touch target for accessibility
• Icons are auto-readable by accessibility services

Behavior and Configuration

• Control visibility with setVisibility
• Enable toggle with android:checkable="true" and handle with setOnCheckedChangeListener
• Support five sizes (XSmall, Small, Medium, Large, XLarge), three widths (Narrow, Default, Wide), two shapes (Round, Square)

      
val iconButton = findViewById<Button>(R.id.icon_button)
iconButton.visibility = View.VISIBLE
iconButton.setOnClickListener {
    // Handle icon button click
}
iconButton.setOnCheckedChangeListener { button, isChecked ->
    if (isChecked) {
        button.setIconResource(R.drawable.ic_boat_filled_24)
    } else {
        button.setIconResource(R.drawable.ic_boat_24)
    }
}
      
    

Icon Button Types

• Default Icon Button: For supplementary actions (e.g., open menu, navigate)
• Toggle Icon Button: For binary selections (e.g., favorite, bookmark), changes shape/icon when selected
• Styles: Filled (highest emphasis), Filled Tonal (moderate), Outlined (medium), Standard (lowest)

Icon Button

• Compact buttons for actions like navigation
• Styles: Filled, Filled Tonal, Outlined, Standard
• Sizes: Extra Small, Small (default), Medium, Large, Extra Large
• Widths: Narrow, Default, Wide
• Shapes: Round (default), Square

Example

      
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/icon_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:layout_margin="16dp"
        android:contentDescription="@string/navigate_by_boat"
        android:checkable="true"
        style="?attr/materialIconButtonFilledStyle"
        app:icon="@drawable/ic_boat_24"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val iconButton = findViewById<Button>(R.id.icon_button)
iconButton.setOnClickListener {
    // Handle boat icon button click
}
iconButton.setOnCheckedChangeListener { button, isChecked ->
    if (isChecked) {
        button.setIconResource(R.drawable.ic_boat_filled_24)
    } else {
        button.setIconResource(R.drawable.ic_boat_24)
    }
}
      
    

Icon Button Sizes

      
<Button
    style="?attr/materialIconButtonFilledStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/navigate_by_boat"
    app:icon="@drawable/ic_boat_24"
    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.Medium"/>
      
    

Icon Button Shapes

      
<Button
    style="?attr/materialIconButtonFilledStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/navigate_by_boat"
    app:icon="@drawable/ic_boat_24"
    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.Small.Square"/>
      
    

Icon Button Widths

      
<Button
    style="?attr/materialIconButtonFilledStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/navigate_by_boat"
    app:icon="@drawable/ic_boat_24"
    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.Small.Wide"/>
      
    

Icon Button Anatomy

Component	Description	Default State	Toggle Selected State
Container	48dp, transparent (Standard) or filled (Filled, Tonal, Outlined)	Varies by style (e.g., colorPrimary for Filled), round shape	Morphs to square shape
Icon	Centered, 24dp, action-specific (e.g., boat)	Varies by style (e.g., colorOnPrimary for Filled), outlined	Filled or bold icon

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Style
Icon	app:icon	setIcon, setIconResource, getIcon	null	Sets icon drawable	All
Icon	app:iconTint	setIconTint, getIconTint	Varies (e.g., colorOnPrimary for Filled)	Sets icon color	All
Container	app:backgroundTint	setBackgroundTintList, getBackgroundTintList	Varies (e.g., colorPrimary for Filled)	Sets container color	All
Container	app:strokeColor	setStrokeColor, getStrokeColor	colorOnSurface at 12% (Outlined)	Sets stroke color	Outlined
Container	app:strokeWidth	setStrokeWidth, getStrokeWidth	1dp (Outlined)	Sets stroke width	Outlined
Container	app:shapeAppearance	setShapeAppearanceModel, getShapeAppearanceModel	Round (default)	Sets shape (Round, Square)	All
Container	app:materialSizeOverlay	N/A	Small (default)	Sets size (XSmall, Small, Medium, Large, XLarge)	All

Styles

• Default style: Widget.Material3.Button.IconButton
• Filled style: Widget.Material3.Button.IconButton.Filled
• Filled Tonal style: Widget.Material3.Button.IconButton.Filled.Tonal
• Outlined style: Widget.Material3.Button.IconButton.Outlined
• Default theme attribute: ?attr/materialIconButtonStyle

Optical Centering

• Offsets icon for asymmetric shapes
• Enable with setOpticalCenterEnabled(true), disabled by default

      
val iconButton = findViewById<Button>(R.id.icon_button)
iconButton.setOpticalCenterEnabled(true)
      
    

Theming Icon Buttons

• Customize color and shape
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/blue_500</item>
    <item name="colorOnPrimary">@color/white</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="materialIconButtonStyle">@style/Widget.App.IconButton</item>
</style>
<style name="Widget.App.IconButton" parent="Widget.Material3.Button.IconButton.Filled">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
</style>
<style name="ThemeOverlay.App.Button" parent="">
    <item name="colorContainer">@color/blue_500</item>
    <item name="colorOnContainer">@color/white</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Icon Buttons
• Covers design, behavior, theming specifications
• Includes structure, accessibility, expressive updates
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Icon Buttons?

• Compact buttons using icons (e.g., boat) for actions like navigation

---

How many types of Icon Buttons are there?

• Two variants: Default and Toggle; four styles: Filled, Filled Tonal, Outlined, Standard

---

When to use an Icon Button?

• Use for supplementary actions in compact layouts like toolbars

---

How to ensure accessibility?

• Add android:contentDescription (e.g., "Navigate by boat") for screen readers

---

Can I customize Icon Buttons?

• Yes, adjust colors, shapes, sizes via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android library

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards, including expressive updates