Merge branch 'main' into text-field-optional-asterisk
@ -12,7 +12,7 @@ dirname: button
|
|||||||
|
|
||||||
<!--*
|
<!--*
|
||||||
# Document freshness: For more information, see go/fresh-source.
|
# Document freshness: For more information, see go/fresh-source.
|
||||||
freshness: { owner: 'lizmitchell' reviewed: '2023-11-10' }
|
freshness: { owner: 'lizmitchell' reviewed: '2024-05-15' }
|
||||||
tag: 'docType:reference'
|
tag: 'docType:reference'
|
||||||
*-->
|
*-->
|
||||||
|
|
||||||
@ -41,7 +41,7 @@ outlined, and text.
|
|||||||
alt="A phone showing a payment screen with a green filled button that says 'Make
|
alt="A phone showing a payment screen with a green filled button that says 'Make
|
||||||
payment'"
|
payment'"
|
||||||
title="There are 5 types of common buttons"
|
title="There are 5 types of common buttons"
|
||||||
src="images/button/hero.png">
|
src="images/button/hero.webp">
|
||||||
|
|
||||||
</catalog-component-header>
|
</catalog-component-header>
|
||||||
|
|
||||||
@ -66,7 +66,7 @@ payment'"
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![The 5 types of common buttons](images/button/types.png "Elevated, filled, filled tonal, outlined, and text buttons")
|
![The 5 types of common buttons](images/button/types.webp "Elevated, filled, filled tonal, outlined, and text buttons")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -151,7 +151,7 @@ a button.
|
|||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![An outlined button with the text "Back" next to a filled button with the text
|
![An outlined button with the text "Back" next to a filled button with the text
|
||||||
"Complete"](images/button/usage.png "Outlined and filled buttons.")
|
"Complete"](images/button/usage.webp "Outlined and filled buttons.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -186,7 +186,7 @@ action and help draw attention.
|
|||||||
|
|
||||||
![A tonal button with a right arrow send icon with text 'send' and a text button
|
![A tonal button with a right arrow send icon with text 'send' and a text button
|
||||||
with the text 'open' with a trailing icon arrow
|
with the text 'open' with a trailing icon arrow
|
||||||
box](images/button/usage-icon.png "Slot in icons to the appropriate slots")
|
box](images/button/usage-icon.webp "Slot in icons to the appropriate slots")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -247,7 +247,7 @@ separation from a patterned background.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![An elevated button](images/button/usage-elevated-button.png)
|
![An elevated button](images/button/usage-elevated-button.webp)
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -311,7 +311,7 @@ than an outline would give, such as "Next" in an onboarding flow.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![A filled tonal button](images/button/usage-filled-tonal-button.png)
|
![A filled tonal button](images/button/usage-filled-tonal-button.webp)
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -344,7 +344,7 @@ the primary action in an app.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![An outlined button](images/button/usage-outlined-button.png)
|
![An outlined button](images/button/usage-outlined-button.webp)
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -377,7 +377,7 @@ options.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![A text button](images/button/usage-text-button.png)
|
![A text button](images/button/usage-text-button.webp)
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -421,7 +421,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of an elevated button with a different theme applied](images/button/theming-elevated-button.png "Elevated button theming example.")
|
![Image of an elevated button with a different theme applied](images/button/theming-elevated-button.webp "Elevated button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -481,7 +481,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of a filled button with a different theme applied](images/button/theming-filled-button.png "Filled button theming example.")
|
![Image of a filled button with a different theme applied](images/button/theming-filled-button.webp "Filled button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -541,7 +541,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of a filled tonal button with a different theme applied](images/button/theming-filled-tonal-button.png "Filled tonal button theming example.")
|
![Image of a filled tonal button with a different theme applied](images/button/theming-filled-tonal-button.webp "Filled tonal button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -601,7 +601,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of an outlined button with a different theme applied](images/button/theming-outlined-button.png "Outlined button theming example.")
|
![Image of an outlined button with a different theme applied](images/button/theming-outlined-button.webp "Outlined button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
@ -659,7 +659,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of a text button with a different theme applied](images/button/theming-text-button.png "Text button theming example.")
|
![Image of a text button with a different theme applied](images/button/theming-text-button.webp "Text button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-only-start -->
|
<!-- catalog-only-start -->
|
||||||
|
@ -13,7 +13,7 @@ dirname: checkbox
|
|||||||
freshness: {
|
freshness: {
|
||||||
owner: 'emarquez'
|
owner: 'emarquez'
|
||||||
owner: 'lizmitchell'
|
owner: 'lizmitchell'
|
||||||
reviewed: '2023-11-10'
|
reviewed: '2024-05-15'
|
||||||
}
|
}
|
||||||
tag: 'docType:reference'
|
tag: 'docType:reference'
|
||||||
*-->
|
*-->
|
||||||
@ -41,7 +41,7 @@ user needs to select one or more options from a list.
|
|||||||
|
|
||||||
<img
|
<img
|
||||||
class="hero"
|
class="hero"
|
||||||
src="images/checkbox/hero.png"
|
src="images/checkbox/hero.webp"
|
||||||
alt="A list of burger additions represented with checkboxes"
|
alt="A list of burger additions represented with checkboxes"
|
||||||
title="Checkboxes in a list of items.">
|
title="Checkboxes in a list of items.">
|
||||||
|
|
||||||
@ -70,7 +70,7 @@ Checkboxes may be standalone, pre-checked, or indeterminate.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Three checkboxes in a row that are unselected, selected, and indeterminate](images/checkbox/usage.png "Unselected, selected, and indeterminate checkboxes.")
|
![Three checkboxes in a row that are unselected, selected, and indeterminate](images/checkbox/usage.webp "Unselected, selected, and indeterminate checkboxes.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/checkbox/usage.html" -->
|
<!-- catalog-include "figures/checkbox/usage.html" -->
|
||||||
@ -87,7 +87,7 @@ Associate a label with a checkbox using the `<label>` element.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Two checkboxes with labels](images/checkbox/usage-label.png "Labeled checkboxes.")
|
![Two checkboxes with labels](images/checkbox/usage-label.webp "Labeled checkboxes.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/checkbox/usage-label.html" -->
|
<!-- catalog-include "figures/checkbox/usage-label.html" -->
|
||||||
@ -142,7 +142,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of a checkbox with a different theme applied](images/checkbox/theming.png "Checkbox theming example.")
|
![Image of a checkbox with a different theme applied](images/checkbox/theming.webp "Checkbox theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/checkbox/theming.html" -->
|
<!-- catalog-include "figures/checkbox/theming.html" -->
|
||||||
|
@ -36,7 +36,7 @@ elements.
|
|||||||
|
|
||||||
</catalog-component-header-title>
|
</catalog-component-header-title>
|
||||||
|
|
||||||
<img class="hero" src="images/chips/hero.png" alt="Two collections of filter chips, with some options selected and some unselected."
|
<img class="hero" src="images/chips/hero.webp" alt="Two collections of filter chips, with some options selected and some unselected."
|
||||||
title="Filter chips">
|
title="Filter chips">
|
||||||
|
|
||||||
</catalog-component-header>
|
</catalog-component-header>
|
||||||
|
@ -32,7 +32,7 @@ important prompts in a user flow.
|
|||||||
|
|
||||||
</catalog-component-header-title>
|
</catalog-component-header-title>
|
||||||
|
|
||||||
<img class="hero" src="images/dialog/hero.png" alt="A dialog displaying phone ringtone options."
|
<img class="hero" src="images/dialog/hero.webp" alt="A dialog displaying phone ringtone options."
|
||||||
title="A dialog">
|
title="A dialog">
|
||||||
|
|
||||||
</catalog-component-header>
|
</catalog-component-header>
|
||||||
|
@ -16,7 +16,7 @@ that groups content in lists and containers.
|
|||||||
Dividers can reinforce tapability, such as when used to separate list items or
|
Dividers can reinforce tapability, such as when used to separate list items or
|
||||||
define tappable regions in an accordion.
|
define tappable regions in an accordion.
|
||||||
|
|
||||||
![Screenshot of five stacked dividers](images/divider/hero.png "Dividers separating items in a list.")
|
![Screenshot of five stacked dividers](images/divider/hero.webp "Dividers separating items in a list.")
|
||||||
|
|
||||||
* [Design article](https://m3.material.io/components/divider) <!-- {.external} -->
|
* [Design article](https://m3.material.io/components/divider) <!-- {.external} -->
|
||||||
* [API Documentation](#api)
|
* [API Documentation](#api)
|
||||||
@ -27,7 +27,7 @@ define tappable regions in an accordion.
|
|||||||
|
|
||||||
Use full width dividers to separate larger sections of unrelated content.
|
Use full width dividers to separate larger sections of unrelated content.
|
||||||
|
|
||||||
![A full width divider separating two paragraphs of "Lorem ipsum"](images/divider/usage.png "Full width divider example")
|
![A full width divider separating two paragraphs of "Lorem ipsum"](images/divider/usage.webp "Full width divider example")
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section>
|
<section>
|
||||||
@ -41,7 +41,7 @@ Use full width dividers to separate larger sections of unrelated content.
|
|||||||
|
|
||||||
Use inset dividers to separate related content within a section.
|
Use inset dividers to separate related content within a section.
|
||||||
|
|
||||||
![A list of design system names separated by an inset divider](images/divider/usage-inset.png "Inset divider example")
|
![A list of design system names separated by an inset divider](images/divider/usage-inset.webp "Inset divider example")
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section>
|
<section>
|
||||||
@ -54,7 +54,7 @@ Use inset dividers to separate related content within a section.
|
|||||||
Inset dividers are equally indented from both sides of the screen by default.
|
Inset dividers are equally indented from both sides of the screen by default.
|
||||||
Use `inset-start` or `inset-end` to change this.
|
Use `inset-start` or `inset-end` to change this.
|
||||||
|
|
||||||
![A list of design system names separated by a leading inset divider](images/divider/usage-inset-start.png "Leading inset divider example")
|
![A list of design system names separated by a leading inset divider](images/divider/usage-inset-start.webp "Leading inset divider example")
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section>
|
<section>
|
||||||
@ -101,7 +101,7 @@ Token | Default value
|
|||||||
|
|
||||||
### Example
|
### Example
|
||||||
|
|
||||||
![A customized divider with a different color and thickness](images/divider/theming.png "Divider theming example.")
|
![A customized divider with a different color and thickness](images/divider/theming.webp "Divider theming example.")
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<style>
|
<style>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
<!--*
|
<!--*
|
||||||
# Document freshness: For more information, see go/fresh-source.
|
# Document freshness: For more information, see go/fresh-source.
|
||||||
freshness: { owner: 'lizmitchell' reviewed: '2023-11-10' }
|
freshness: { owner: 'lizmitchell' reviewed: '2024-05-15' }
|
||||||
tag: 'docType:reference'
|
tag: 'docType:reference'
|
||||||
*-->
|
*-->
|
||||||
|
|
||||||
@ -17,7 +17,7 @@ Material's elevation system is deliberately limited to just a handful of levels.
|
|||||||
This creative constraint means you need to make thoughtful decisions about your
|
This creative constraint means you need to make thoughtful decisions about your
|
||||||
UI’s elevation story.
|
UI’s elevation story.
|
||||||
|
|
||||||
![Diagram showing the five elevation levels and their respective dp values](images/elevation/hero.png "Material uses six levels of elevation, each with a corresponding dp value. These values are named for their relative distance above the UI’s surface: 0, +1, +2, +3, +4, and +5. An element’s resting state can be on levels 0 to +3, while levels +4 and +5 are reserved for user-interacted states such as hover and dragged.")
|
![Diagram showing the five elevation levels and their respective dp values](images/elevation/hero.webp "Material uses six levels of elevation, each with a corresponding dp value. These values are named for their relative distance above the UI’s surface: 0, +1, +2, +3, +4, and +5. An element’s resting state can be on levels 0 to +3, while levels +4 and +5 are reserved for user-interacted states such as hover and dragged.")
|
||||||
|
|
||||||
* [Design article](https://m3.material.io/styles/elevation) <!-- {.external} -->
|
* [Design article](https://m3.material.io/styles/elevation) <!-- {.external} -->
|
||||||
* [API Documentation](#api)
|
* [API Documentation](#api)
|
||||||
@ -30,7 +30,7 @@ Elevation can be set from 0 to 5 using the `--md-elevation-level` CSS custom
|
|||||||
property. The elevation will automatically fill the nearest `position: relative`
|
property. The elevation will automatically fill the nearest `position: relative`
|
||||||
element's size and shape.
|
element's size and shape.
|
||||||
|
|
||||||
![A rounded square with a drop shadow beneath it.](images/elevation/usage.png "A surface with an elevation shadow.")
|
![A rounded square with a drop shadow beneath it.](images/elevation/usage.webp "A surface with an elevation shadow.")
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<style>
|
<style>
|
||||||
@ -99,7 +99,7 @@ Token | Default value
|
|||||||
|
|
||||||
### Example
|
### Example
|
||||||
|
|
||||||
![Image of an elevation surface with a different theme applied](images/elevation/theming.png "Elevation theming example.")
|
![Image of an elevation surface with a different theme applied](images/elevation/theming.webp "Elevation theming example.")
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<style>
|
<style>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
<!--*
|
<!--*
|
||||||
# Document freshness: For more information, see go/fresh-source.
|
# Document freshness: For more information, see go/fresh-source.
|
||||||
freshness: { owner: 'lizmitchell' reviewed: '2023-11-30' }
|
freshness: { owner: 'lizmitchell' reviewed: '2024-05-15' }
|
||||||
tag: 'docType:reference'
|
tag: 'docType:reference'
|
||||||
*-->
|
*-->
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ people take supplementary actions with a single tap.
|
|||||||
<img
|
<img
|
||||||
class="hero"
|
class="hero"
|
||||||
alt="The top half of a phone application with a back icon button at the top left and three icon buttons on the top right, heart, share, and three dot."
|
alt="The top half of a phone application with a back icon button at the top left and three icon buttons on the top right, heart, share, and three dot."
|
||||||
src="images/iconbutton/hero.png">
|
src="images/iconbutton/hero.webp">
|
||||||
|
|
||||||
</catalog-component-header>
|
</catalog-component-header>
|
||||||
|
|
||||||
@ -55,7 +55,7 @@ people take supplementary actions with a single tap.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Side by side view of standard and contained icon buttons](images/iconbutton/buttons.png "1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)")
|
![Side by side view of standard and contained icon buttons](images/iconbutton/buttons.webp "1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/buttons.html" -->
|
<!-- catalog-include "figures/iconbutton/buttons.html" -->
|
||||||
@ -79,7 +79,7 @@ the icon font.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![A row of icon buttons](images/iconbutton/usage.png "Icon buttons can be used within other components, such as a bottom app bar")
|
![A row of icon buttons](images/iconbutton/usage.webp "Icon buttons can be used within other components, such as a bottom app bar")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/usage.html" -->
|
<!-- catalog-include "figures/iconbutton/usage.html" -->
|
||||||
@ -119,7 +119,7 @@ attribute to turn the icon button into a link.
|
|||||||
|
|
||||||
![Two rows of toggling icon buttons, the top row is unselected and the bottom
|
![Two rows of toggling icon buttons, the top row is unselected and the bottom
|
||||||
row is
|
row is
|
||||||
selected](images/iconbutton/usage-toggle.png "Unselected and Selected Icon Button")
|
selected](images/iconbutton/usage-toggle.webp "Unselected and Selected Icon Button")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/usage-toggle.html" -->
|
<!-- catalog-include "figures/iconbutton/usage-toggle.html" -->
|
||||||
@ -203,7 +203,7 @@ emphasis of the icon buttons.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![A check icon](images/iconbutton/usage-standard.png "Standard Icon Button with Check icon")
|
![A check icon](images/iconbutton/usage-standard.webp "Standard Icon Button with Check icon")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/usage-standard.html" -->
|
<!-- catalog-include "figures/iconbutton/usage-standard.html" -->
|
||||||
@ -220,7 +220,7 @@ emphasis of the icon buttons.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![A circular button with a check icon](images/iconbutton/usage-filled.png "Filled Icon Button")
|
![A circular button with a check icon](images/iconbutton/usage-filled.webp "Filled Icon Button")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/usage-filled.html" -->
|
<!-- catalog-include "figures/iconbutton/usage-filled.html" -->
|
||||||
@ -240,7 +240,7 @@ actions.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![A filled tonal icon button with a check icon](images/iconbutton/usage-filled-tonal.png "Filled Tonal Icon Button")
|
![A filled tonal icon button with a check icon](images/iconbutton/usage-filled-tonal.webp "Filled Tonal Icon Button")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/usage-filled-tonal.html" -->
|
<!-- catalog-include "figures/iconbutton/usage-filled-tonal.html" -->
|
||||||
@ -262,7 +262,7 @@ high emphasis action.
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![An outlined circular icon button with a check icon](images/iconbutton/usage-outlined.png "Outlined Icon button")
|
![An outlined circular icon button with a check icon](images/iconbutton/usage-outlined.webp "Outlined Icon button")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/usage-outlined.html" -->
|
<!-- catalog-include "figures/iconbutton/usage-outlined.html" -->
|
||||||
@ -297,7 +297,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of a standard icon button with a different theme applied](images/iconbutton/theming-standard.png "Standard icon button theming example.")
|
![Image of a standard icon button with a different theme applied](images/iconbutton/theming-standard.webp "Standard icon button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/theming-standard.html" -->
|
<!-- catalog-include "figures/iconbutton/theming-standard.html" -->
|
||||||
@ -333,7 +333,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of a filled icon button with a different theme applied](images/iconbutton/theming-filled.png "Filled icon button theming example.")
|
![Image of a filled icon button with a different theme applied](images/iconbutton/theming-filled.webp "Filled icon button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/theming-filled.html" -->
|
<!-- catalog-include "figures/iconbutton/theming-filled.html" -->
|
||||||
@ -368,7 +368,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of a filled tonal icon button with a different theme applied](images/iconbutton/theming-filled-tonal.png "Filled tonal icon button theming example.")
|
![Image of a filled tonal icon button with a different theme applied](images/iconbutton/theming-filled-tonal.webp "Filled tonal icon button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/theming-filled-tonal.html" -->
|
<!-- catalog-include "figures/iconbutton/theming-filled-tonal.html" -->
|
||||||
@ -403,7 +403,7 @@ Token | Default value
|
|||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
![Image of an outlined icon button with a different theme applied](images/iconbutton/theming-outlined.png "Outlined icon button theming example.")
|
![Image of an outlined icon button with a different theme applied](images/iconbutton/theming-outlined.webp "Outlined icon button theming example.")
|
||||||
|
|
||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/theming-outlined.html" -->
|
<!-- catalog-include "figures/iconbutton/theming-outlined.html" -->
|
||||||
|
@ -26,7 +26,7 @@ created at seven weights across three different styles.
|
|||||||
Icons can be specified by name, unicode code point, or have an `<svg>` child
|
Icons can be specified by name, unicode code point, or have an `<svg>` child
|
||||||
element.
|
element.
|
||||||
|
|
||||||
![Settings icon as ligature, check box icon as codepoint, and house icon as SVG](images/icon/usage.png "Example icons")
|
![Settings icon as ligature, check box icon as codepoint, and house icon as SVG](images/icon/usage.webp "Example icons")
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<md-icon>settings</md-icon>
|
<md-icon>settings</md-icon>
|
||||||
@ -67,7 +67,7 @@ Load the font with
|
|||||||
|
|
||||||
### Rounded
|
### Rounded
|
||||||
|
|
||||||
![Settings, checkbox, and house icons in Rounded style](images/icon/usage_rounded.png "Rounded Icons")
|
![Settings, checkbox, and house icons in Rounded style](images/icon/usage_rounded.webp "Rounded Icons")
|
||||||
|
|
||||||
Rounded symbols use a corner radius that pairs well with brands that use heavier
|
Rounded symbols use a corner radius that pairs well with brands that use heavier
|
||||||
typography, curved logos, or circular elements to express their style.
|
typography, curved logos, or circular elements to express their style.
|
||||||
@ -82,7 +82,7 @@ To use Rounded icons, set `--md-icon-font` to `'Material Symbols Rounded'`.
|
|||||||
|
|
||||||
### Sharp
|
### Sharp
|
||||||
|
|
||||||
![Settings, checkbox, and house icons in Sharp style](images/icon/usage_sharp.png "Sharp Icons")
|
![Settings, checkbox, and house icons in Sharp style](images/icon/usage_sharp.webp "Sharp Icons")
|
||||||
|
|
||||||
Sharp symbols display corners with straight edges, for a crisp style that
|
Sharp symbols display corners with straight edges, for a crisp style that
|
||||||
remains legible even at smaller scales. These rectangular shapes can support
|
remains legible even at smaller scales. These rectangular shapes can support
|
||||||
@ -98,7 +98,7 @@ To use Sharp icons, set `font-family` to `'Material Symbols Sharp'`.
|
|||||||
|
|
||||||
### Fill
|
### Fill
|
||||||
|
|
||||||
![Filed settings, checkbox, and house icons](images/icon/usage_filled.png "Filled Icons")
|
![Filed settings, checkbox, and house icons](images/icon/usage_filled.webp "Filled Icons")
|
||||||
|
|
||||||
Filled Icons gives you the ability to transition from a more outlined style to a
|
Filled Icons gives you the ability to transition from a more outlined style to a
|
||||||
reversed or more filled style.
|
reversed or more filled style.
|
||||||
@ -148,7 +148,7 @@ Token | Default value
|
|||||||
|
|
||||||
### Example
|
### Example
|
||||||
|
|
||||||
![Image of icons with a different theme applied](images/icon/theming.png "Icon theming example.")
|
![Image of icons with a different theme applied](images/icon/theming.webp "Icon theming example.")
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
|
||||||
|
Before Width: | Height: | Size: 214 KiB |
BIN
docs/components/images/button/hero.webp
Normal file
After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 4.3 KiB |
BIN
docs/components/images/button/theming-elevated-button.webp
Normal file
After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 2.3 KiB |
BIN
docs/components/images/button/theming-filled-button.webp
Normal file
After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 2.4 KiB |
BIN
docs/components/images/button/theming-filled-tonal-button.webp
Normal file
After Width: | Height: | Size: 848 B |
Before Width: | Height: | Size: 3.5 KiB |
BIN
docs/components/images/button/theming-outlined-button.webp
Normal file
After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 2.0 KiB |
BIN
docs/components/images/button/theming-text-button.webp
Normal file
After Width: | Height: | Size: 1002 B |
Before Width: | Height: | Size: 26 KiB |
BIN
docs/components/images/button/types.webp
Normal file
After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 7.7 KiB |
BIN
docs/components/images/button/usage-elevated-button.webp
Normal file
After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 3.6 KiB |
BIN
docs/components/images/button/usage-filled-button.webp
Normal file
After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 3.6 KiB |
BIN
docs/components/images/button/usage-filled-tonal-button.webp
Normal file
After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 6.9 KiB |
BIN
docs/components/images/button/usage-icon.webp
Normal file
After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 5.6 KiB |
BIN
docs/components/images/button/usage-outlined-button.webp
Normal file
After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 2.0 KiB |
BIN
docs/components/images/button/usage-text-button.webp
Normal file
After Width: | Height: | Size: 864 B |
Before Width: | Height: | Size: 9.6 KiB |
BIN
docs/components/images/button/usage.webp
Normal file
After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 58 KiB |
BIN
docs/components/images/checkbox/hero.webp
Normal file
After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 1.1 KiB |
BIN
docs/components/images/checkbox/theming.webp
Normal file
After Width: | Height: | Size: 726 B |
Before Width: | Height: | Size: 9.5 KiB |
BIN
docs/components/images/checkbox/usage-label.webp
Normal file
After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 1.8 KiB |
BIN
docs/components/images/checkbox/usage.webp
Normal file
After Width: | Height: | Size: 1018 B |
Before Width: | Height: | Size: 184 KiB |
BIN
docs/components/images/chips/hero.webp
Normal file
After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 137 KiB |
BIN
docs/components/images/dialog/hero.webp
Normal file
After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 151 KiB |
BIN
docs/components/images/divider/hero.webp
Normal file
After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 10 KiB |
BIN
docs/components/images/divider/theming.webp
Normal file
After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 9.7 KiB |
BIN
docs/components/images/divider/usage-inset-start.webp
Normal file
After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 9.7 KiB |
BIN
docs/components/images/divider/usage-inset.webp
Normal file
After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 10 KiB |
BIN
docs/components/images/divider/usage.webp
Normal file
After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 18 KiB |
BIN
docs/components/images/elevation/hero.webp
Normal file
After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 11 KiB |
BIN
docs/components/images/elevation/theming.webp
Normal file
After Width: | Height: | Size: 728 B |
Before Width: | Height: | Size: 8.3 KiB |
BIN
docs/components/images/elevation/usage.webp
Normal file
After Width: | Height: | Size: 606 B |
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 1.8 MiB |
Before Width: | Height: | Size: 22 KiB |
BIN
docs/components/images/icon/theming.webp
Normal file
After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 4.0 KiB |
BIN
docs/components/images/icon/usage.webp
Normal file
After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 12 KiB |
BIN
docs/components/images/icon/usage_filled.webp
Normal file
After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 4.2 KiB |
BIN
docs/components/images/icon/usage_rounded.webp
Normal file
After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 3.9 KiB |
BIN
docs/components/images/icon/usage_sharp.webp
Normal file
After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 17 KiB |
BIN
docs/components/images/iconbutton/buttons.webp
Normal file
After Width: | Height: | Size: 7.3 KiB |
Before Width: | Height: | Size: 640 KiB |
BIN
docs/components/images/iconbutton/hero.webp
Normal file
After Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 1.7 KiB |
BIN
docs/components/images/iconbutton/theming-filled-tonal.webp
Normal file
After Width: | Height: | Size: 478 B |
Before Width: | Height: | Size: 1.8 KiB |
BIN
docs/components/images/iconbutton/theming-filled.webp
Normal file
After Width: | Height: | Size: 618 B |
Before Width: | Height: | Size: 1.8 KiB |
BIN
docs/components/images/iconbutton/theming-outlined.webp
Normal file
After Width: | Height: | Size: 610 B |
Before Width: | Height: | Size: 1.4 KiB |
BIN
docs/components/images/iconbutton/theming-standard.webp
Normal file
After Width: | Height: | Size: 326 B |
Before Width: | Height: | Size: 5.6 KiB |
BIN
docs/components/images/iconbutton/usage-filled-tonal.webp
Normal file
After Width: | Height: | Size: 630 B |
Before Width: | Height: | Size: 6.1 KiB |
BIN
docs/components/images/iconbutton/usage-filled.webp
Normal file
After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 6.9 KiB |
BIN
docs/components/images/iconbutton/usage-outlined.webp
Normal file
After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 4.2 KiB |
BIN
docs/components/images/iconbutton/usage-standard.webp
Normal file
After Width: | Height: | Size: 346 B |
Before Width: | Height: | Size: 17 KiB |
BIN
docs/components/images/iconbutton/usage-toggle.webp
Normal file
After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.1 KiB |
BIN
docs/components/images/iconbutton/usage.webp
Normal file
After Width: | Height: | Size: 1.5 KiB |