[Docs] Updated the nomenclature of images and removed unused images.

PiperOrigin-RevId: 791194140

Author: Material Design Team

docs/components/BadgeDrawable.md

@@ -13,7 +13,7 @@ path: /catalog/badging/
 counts, or status information on navigation items and icons. There are two
 variants of badges.
 
-<img src="assets/badge/small_badge_hero.png" alt="Small badge" height="250"/> | <img src="assets/badge/large_badge_hero.png" alt="Large badge" height="250"/>
+<img src="assets/badge/small-badge-hero.png" alt="Small badge" height="250"/> | <img src="assets/badge/large-badge-hero.png" alt="Large badge" height="250"/>
 ----------------------------------------------------------------------------- | -----------------------------------------------------------------------------
 1                                                                             | 2
 
@@ -29,7 +29,7 @@ variants of badges.
 
 ## Anatomy
 
-<img src="assets/badge/badges_anatomy.png" alt="Small and large badges anatomy" width="800"/>
+<img src="assets/badge/badges-anatomy.png" alt="Small and large badges anatomy" width="800"/>
 
 1.  Small badge
 2.  Large badge container
@@ -79,7 +79,7 @@ requests in a [`BottomNavigationView`](BottomNavigation.md) or
 
 ### Adding badges
 
-![Two variants of badges](assets/badge/badges_hero.png)
+![Two variants of badges](assets/badge/badges-hero.png)
 
 1.  Small badge on a navigation item
 2.  Large badge on a navigation item

docs/components/BottomAppBar.md

@@ -135,7 +135,7 @@ page.
 The following example shows a bottom app bar with a navigation icon, 3 action
 icons, and an embedded FAB.
 
-<img src="assets/bottomappbar/bottomappbar_basic.png" alt="Purple bottom app bar with grey icons and purple inset floating action button." width="650"/>
+<img src="assets/bottomappbar/bottomappbar-basic.png" alt="Purple bottom app bar with grey icons and purple inset floating action button." width="650"/>
 
 **In the layout:**
 
@@ -349,7 +349,7 @@ API and source code:
 
 The following example shows a bottom app bar with Material theming.
 
-<img src="assets/bottomappbar/bottomappbar_theming.png" alt="Pink bottom app bar with pink diamond inset FAB and brown icons." width="600"/>
+<img src="assets/bottomappbar/bottomappbar-theming.png" alt="Pink bottom app bar with pink diamond inset FAB and brown icons." width="600"/>
 
 ##### Implementing bottom app bar theming
 

docs/components/Card.md

@@ -12,7 +12,7 @@ path: /catalog/cards/
 [Cards](https://m3.material.io/components/cards/overview) contain content and
 actions about a single subject. There are three variants of cards.
 
-<img src="assets/cards/cards_types.png" alt="Three types of cards." height ="300">
+<img src="assets/cards/cards-types.png" alt="Three types of cards." height ="300">
 
 1.  Elevated card
 2.  Filled card
@@ -27,7 +27,7 @@ actions about a single subject. There are three variants of cards.
 
 ## Anatomy
 
-<img src="assets/cards/card_anatomy.png" alt="A card with labeled sections for container, headline, subhead, supporting text, image, and buttons" height ="500"/>
+<img src="assets/cards/card-anatomy.png" alt="A card with labeled sections for container, headline, subhead, supporting text, image, and buttons" height ="500"/>
 
 1.  Container
 2.  Headline
@@ -119,7 +119,7 @@ elevation of `2dp`.
 
 The following example shows an elevated card.
 
-<img src="assets/cards/cards_elevated.png" alt="Elevated card with content, a title, a secondary title, text, and two action buttons in purple" height ="500"/>
+<img src="assets/cards/cards-elevated.png" alt="Elevated card with content, a title, a secondary title, text, and two action buttons in purple" height ="500"/>
 
 In the layout:
 
@@ -143,7 +143,7 @@ emphasis than elevated or outlined cards.
 
 The following example shows a filled card.
 
-<img src="assets/cards/cards_filled.png" alt="Filled card with content, a title, supporting text, and buttons in purple" height ="500"/>
+<img src="assets/cards/cards-filled.png" alt="Filled card with content, a title, supporting text, and buttons in purple" height ="500"/>
 
 In the layout:
 
@@ -167,7 +167,7 @@ greater emphasis than the other types.
 
 The following example shows an outlined card.
 
-<img src="assets/cards/cards_outlined.png" alt="Outlined card with photo, a title, a secondary title, text, and Action 1 and
+<img src="assets/cards/cards-outlined.png" alt="Outlined card with photo, a title, a secondary title, text, and Action 1 and
 Action 2 buttons in purple" height ="500"/>
 
 ```xml
@@ -268,7 +268,7 @@ shown in the [Card theming example](#card-example) section.
 
 ### Making cards checkable
 
-<img src="assets/cards/cards_checked.png" alt="Outlined card with a checked button and a light purple overlay; secondary
+<img src="assets/cards/cards-checked.png" alt="Outlined card with a checked button and a light purple overlay; secondary
 title and Action 1 and Action 2 buttons" width="500"/>
 
 When a card is checked, it will show a checked icon and change its foreground
@@ -300,7 +300,7 @@ card.setOnLongClickListener {
 
 ### Making cards draggable
 
-<img src="assets/cards/cards_dragged.png" alt="Outlined card with a light grey overlay; secondary title and Action 1 and
+<img src="assets/cards/cards-dragged.png" alt="Outlined card with a light grey overlay; secondary title and Action 1 and
 Action 2 buttons, being dragged" width="500"/>
 
 Cards have an `app:state_dragged` with foreground and elevation changes to
@@ -447,7 +447,7 @@ Material components theme. If not, set the style to
 
 The following example shows a card with Material theming.
 
-<img src="assets/cards/cards_theming.png" alt="Card with Shrine theme with photo, title, secondary title, text and Action 1 and Action 2 buttons in black." height ="500"/>
+<img src="assets/cards/cards-theming.png" alt="Card with Shrine theme with photo, title, secondary title, text and Action 1 and Action 2 buttons in black." height ="500"/>
 
 ##### Implementing card theming
 

docs/components/Carousel.md

@@ -42,7 +42,7 @@ There are four [carousel layouts](#layouts-of-carousel):
 <summary>The multi-browse layout shows at least one large, medium, and small
 carousel item.</summary>
 
-![Anatomy of Multi-browse carousel](assets/carousel/multibrowse_anatomy.png)
+![Anatomy of Multi-browse carousel](assets/carousel/multibrowse-anatomy.png)
 
 1.  Container
 2.  Large carousel item
@@ -58,7 +58,7 @@ carousel item.</summary>
 <summary>The uncontained layout shows items that scroll to the edge of the
 container.</summary>
 
-![Anatomy of uncontained carousel](assets/carousel/uncontained_anatomy.png)
+![Anatomy of uncontained carousel](assets/carousel/uncontained-anatomy.png)
 
 1.  Container
 2.  Large carousel item
@@ -74,7 +74,7 @@ container.</summary>
 <summary>The hero layout shows at least one large item and one small
 item.</summary>
 
-![Anatomy of hero carousel](assets/carousel/hero_anatomy.png)
+![Anatomy of hero carousel](assets/carousel/hero-anatomy.png)
 
 1.  Container
 2.  Large carousel item
@@ -88,7 +88,7 @@ item.</summary>
 <summary>The center-aligned hero layout shows at least one large item and two
 small items.</summary>
 
-![Anatomy of center-aligned hero carousel](assets/carousel/centeralignedhero_anatomy.png)
+![Anatomy of center-aligned hero carousel](assets/carousel/centeralignedhero-anatomy.png)
 
 1.  Container
 2.  Large carousel item
@@ -102,7 +102,7 @@ small items.</summary>
 
 <summary>The full-screen layout shows one edge-to-edge large item.</summary>
 
-<img src="assets/carousel/fullscreen_anatomy.png" alt="Anatomy of full-screen carousel" height="650"/>
+<img src="assets/carousel/fullscreen-anatomy.png" alt="Anatomy of full-screen carousel" height="650"/>
 
 1.  Container
 2.  Large carousel item

docs/components/Dialog.md

@@ -13,7 +13,7 @@ path: /catalog/dialogs/
 a task and can contain critical information, require decisions, or involve
 multiple tasks. There are two variants of dialogs.
 
-<img src="assets/dialogs/dialogs_types_hero.png" alt="Examples of the two types of dialogs." height="400"/>
+<img src="assets/dialogs/dialogs-types-hero.png" alt="Examples of the two types of dialogs." height="400"/>
 
 1.  Basic dialog
 2.  Full-screen dialog
@@ -29,7 +29,7 @@ multiple tasks. There are two variants of dialogs.
 
 #### Basic dialogs
 
-<img src="assets/dialogs/basic_dialogs_anatomy.png" alt="anatomy" height="500"/>
+<img src="assets/dialogs/basic-dialogs-anatomy.png" alt="anatomy" height="500"/>
 
 1.  Container
 2.  Icon (optional)
@@ -41,7 +41,7 @@ multiple tasks. There are two variants of dialogs.
 
 #### Full-screen dialogs
 
-<img src="assets/dialogs/full-screen_dialogs_anatomy.png" alt="Anatomy" height="350"/>
+<img src="assets/dialogs/full-screen-dialogs-anatomy.png" alt="Anatomy" height="350"/>
 
 1.  Container
 2.  Header
@@ -150,7 +150,7 @@ confirmation.
 
 The following example shows a basic dialog.
 
-<img src="assets/dialogs/dialogs_basic.png" alt="Dialog with title, and text and purple buttons to cancel, decline or accept" height="300"/>
+<img src="assets/dialogs/dialogs-basic.png" alt="Dialog with title, and text and purple buttons to cancel, decline or accept" height="300"/>
 
 In code:
 
@@ -232,7 +232,7 @@ API and source code:
 
 The following example shows a dialog with Material theming.
 
-<img src="assets/dialogs/dialogs_theming.png" alt="Dialog with title and text buttons in brown and selected radio button in pink" height="300"/>
+<img src="assets/dialogs/dialogs-theming.png" alt="Dialog with title and text buttons in brown and selected radio button in pink" height="300"/>
 
 ##### Implementing dialog theming
 

docs/components/DockedFloatingToolbars.md

@@ -12,7 +12,7 @@ path: /catalog/docked-and-floating-toolbars/
 Docked & floating toolbars display frequently used actions relevant to the
 current page.
 
-![Docked & floating toolbars](assets/dockedandfloatingtoolbars/docked_and_floating_toolbar_types.png)
+![Docked & floating toolbars](assets/dockedandfloatingtoolbars/docked-and-floating-toolbar-types.png)
 
 1.  [Docked toolbar](DockedToolbar.md): Spans the full width of the window. It’s
     best used for global actions that remain the same across multiple pages.
@@ -28,7 +28,7 @@ current page.
 
 ## Anatomy
 
-![Docked & floating toolbars anatomy diagram](assets/dockedandfloatingtoolbars/docked_and_floating_toolbar_anatomy.png)
+![Docked & floating toolbars anatomy diagram](assets/dockedandfloatingtoolbars/docked-and-floating-toolbar-anatomy.png)
 
 1.  Container
 2.  Elements
@@ -41,7 +41,7 @@ More details on anatomy items in the
 Before you can use `Material3Expressive` component styles, follow the
 [`Material3Expressive themes` setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
 
-<img src="assets/dockedtoolbar/floating_and_docked_toolbar_expressive.png" alt="The floating and docked toolbar" width="700">
+<img src="assets/dockedandfloatingtoolbars/floating-and-docked-toolbar-expressive.png" alt="The floating and docked toolbar" width="700">
 
 1.  Floating, vibrant color scheme and paired with FAB
 2.  Docked with embedded primary action instead of FAB

docs/components/FloatingActionButtonMenu.md

@@ -14,12 +14,12 @@ A
 opens from a FAB to show 2–6 related actions floating on screen. There is one
 FAB menu size for all sizes of FABs.
 
-![FAB menu one type.](assets/fabmenu/fabmenu_type.png)
+![FAB menu one type.](assets/fabmenu/fabmenu-type.png)
 
 Fab menu is not used with extended FABs and it is available in primary,
 secondary, and tertiary color sets.
 
-![A FAB menu on a screen.](assets/fabmenu/fabmenu_hero.png)
+![A FAB menu on a screen.](assets/fabmenu/fabmenu-hero.png)
 
 Use the FAB menu to show multiple related actions in a prominent, expressive
 style. It should always appear in the same place as the FAB that opened it.
@@ -31,7 +31,7 @@ style. It should always appear in the same place as the FAB that opened it.
 
 ## Anatomy
 
-![FAB menu anatomy diagram](assets/fabmenu/fabmenu_anatomy.png)
+![FAB menu anatomy diagram](assets/fabmenu/fabmenu-anatomy.png)
 
 1.  Close button
 2.  Menu item
@@ -45,7 +45,7 @@ The FAB menu adds more options to the FAB. It should replace the speed dial and
 any usage of stacked small FABs.
 [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
 
-<img src="assets/fabmenu/fabmenu_expressive.png" alt="All size FAB menu expressive" width="700"/>
+<img src="assets/fabmenu/fabmenu-expressive.png" alt="All size FAB menu expressive" width="700"/>
 The FAB menu uses contrasting color and large items to focus attention. It can
 open from any size FAB.
 

docs/components/List.md

@@ -12,7 +12,7 @@ path: /catalog/lists/
 [Lists](https://m3.material.io/components/lists) are continuous, vertical
 indexes of text or images.
 
-![Different types of list items](assets/lists/list_hero.png) List items can have
+![Different types of list items](assets/lists/list-hero.png) List items can have
 supporting text and values
 
 **Note:** Images use various dynamic color schemes.
@@ -24,7 +24,7 @@ supporting text and values
 
 ## Anatomy
 
-![Anatomy of a list](assets/lists/lists_anatomy.png)
+![Anatomy of a list](assets/lists/lists-anatomy.png)
 
 1.  Leading video thumbnail (optional)
 2.  Container
@@ -44,7 +44,7 @@ More details on anatomy items in the
 
 List items come in three sizes:
 
-![Three sizes of list items](assets/lists/lists_sizes.png)
+![Three sizes of list items](assets/lists/lists-sizes.png)
 
 1.  **One-line list** items contain a maximum of one line of text.
 2.  **Two-line list** items contain a maximum of two lines of text.
@@ -63,7 +63,7 @@ Components for Android library. For more information, go to the
 [Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md)
 page.
 
-![Example of a list](assets/lists/lists_hero.png)
+![Example of a list](assets/lists/lists-hero.png)
 
 *   Use lists to help users find a specific item and act on it
 *   Order list items in logical ways (like alphabetical or numerical)

docs/components/LoadingIndicator.md

@@ -114,7 +114,7 @@ A loading indicator can be added to a layout:
     android:layout_height="wrap_content"/>
 ```
 
-![Animation of uncontained loading indicator](assets/loadingindicator/loading_indicator.gif)
+![Animation of uncontained loading indicator](assets/loadingindicator/loading-indicator.gif)
 
 ```xml
 <!-- Loading indicator with a container -->
@@ -124,7 +124,7 @@ A loading indicator can be added to a layout:
     android:layout_height="wrap_content"/>
 ```
 
-![Animation of contained loading indicator](assets/loadingindicator/loading_indicator_contained.gif)
+![Animation of contained loading indicator](assets/loadingindicator/loading-indicator-contained.gif)
 
 ### Making loading indicators accessible
 

docs/components/SideSheet.md

@@ -13,7 +13,7 @@ path: /catalog/side-sheet-behavior/
 surfaces containing supplementary content that are anchored to the side of the
 screen. There are two variants of side sheets.
 
-<img src="assets/sidesheet/sidesheet_hero.png" alt="Side sheet hero image" width="650"/>
+<img src="assets/sidesheet/sidesheet-hero.png" alt="Side sheet hero image" width="650"/>
 
 1.  Standard side sheet
 2.  Modal side sheet
@@ -29,7 +29,7 @@ screen. There are two variants of side sheets.
 
 #### Standard side sheet
 
-<img src="assets/sidesheet/standard_sidesheet_anatomy.png" alt="standard side sheet anatomy" height="500"/>
+<img src="assets/sidesheet/standard-sidesheet-anatomy.png" alt="standard side sheet anatomy" height="500"/>
 
 1.  Divider (optional)
 2.  Headline
@@ -38,7 +38,7 @@ screen. There are two variants of side sheets.
 
 #### Modal side sheet
 
-<img src="assets/sidesheet/modal_sidesheet_anatomy.png" alt="modal side sheet anatomy" height="500"/>
+<img src="assets/sidesheet/modal-sidesheet-anatomy.png" alt="modal side sheet anatomy" height="500"/>
 
 1.  Back icon button (optional)
 2.  Header