Icon Button

Represents a Material UI styled icon button for user interaction.

Overview

The IconButton creates a circular button styled according to Material UI. It supports both system and custom images, and offers multiple styling and customizing options.

To you use IconButton, initialize it with either a system symbol or a custom image, select the desired style, and provide an action closure for button interaction.

Initializers

Creates a circular icon button with a system symbol, style, and action.

IconButton(
    systemImage: String,
    style: IconButtonStyle,
    _ action: @escaping () -> Void
)

Creates a circular icon button with a custom image, style, and action.

IconButton(
  image: String,
  style: IconButtonStyle,
  _ action: @escaping () -> Void
)

For detailed descriptions of the available icon styles in IconButton, refer to the IconButtonStyle.

Parameters

Parameter	Description
systemImage	SF Symbol string for system-provided icons.
imageName	Name of a custom image.
style	The style of the button, defined by IconButtonStyle.
action	Closure to execute when the button is pressed.

Modifiers

Sets the corner radius for icon button.

iconButtonSize(_ frameSize: CGFloat)

Sets the font weight for icon button.

iconButtonFontSize(_ fontSize: Font)

Example

Displays a circular icon button with a custom style using an SF Symbol.

IconButton(systemImage: "heart.fill", style: .elevated) {
    Void()
}

Displays a circular icon button with a custom style using a custom image.

IconButton(imageName: "customIcon", style: .filled) {
    Void()
}

Displays a circular icon button with a custom frame and font size.

IconButton(systemImage: "heart.fill", style: .tonal) {
    Void()
}
.iconButtonSize(50)
.iconButtonFontSize(.title)

IconButton uses the default configuration's values for frame and font size if custom values are not specified.