Icon button (icon_button)

To use inside "Top app bar" or "Card" components.

ID Label Description Schema
label Label The button label
url URL The button URL. Optional.
                        type: string
format: uri-reference

                      
icon Icon Icon list in https://fonts.google.com/icons?selected=Material+Icons
                        type: string

                      
            id: icon_button
label: 'Icon button'
description: 'To use inside "Top app bar" or "Card" components.'
slots:
    label:
        id: label
        label: Label
        description: 'The button label'
props:
    url:
        id: url
        label: URL
        description: 'The button URL. Optional.'
        schema:
            type: string
            format: uri-reference
    icon:
        id: icon
        label: Icon
        description: 'Icon list in https://fonts.google.com/icons?selected=Material+Icons'
        schema:
            type: string
library:
    dependencies:
        - material_icons
        - top_app_bar
    id: icon_button
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': icon_button
            label: Submit
            url: 'http://example.com'
            icon: search

          
<a aria-label="Submit" class="mdc-icon-button material-icons" href="http://example.com">search</a>