Icons in DevExpress Buttons for .NET MAUI

• Dec 12, 2023
• 2 minutes to read

A button’s icon helps users understand the purpose of this button. DXButton and DXToggleButton controls allow you to specify a custom icon, configure its color, position, size, indent, and visibility.

Use the following API to configure the button’s icon:

Icon

Gets or sets the icon image within the button’s content. This is a bindable property.

ShowIcon

Gets or sets whether to show an icon within the button’s content. This is a bindable property.

IconAspect

Gets or sets the icon scale within the button’s content. This is a bindable property.

IconColorizationEnabled

Gets or sets whether to change the icon color within the button’s content. This is a bindable property.

IconColor

Gets or sets the icon color within the button’s content. This is a bindable property.

CheckedIconColor

Gets or sets the icon color of the toggle button in the checked state. This is a bindable property.

PressedIconColor

Gets or sets the icon color of the button in the pressed state. This is a bindable property.

CheckedPressedIconColor

Gets or sets the icon color of the toggle button in checked and pressed states. This is a bindable property.

DisabledIconColor

Gets or sets the icon color of the button in the disabled state. This is a bindable property.

CheckedDisabledIconColor

Gets or sets the icon color of the toggle button in checked and disabled states. This is a bindable property.

IconHeight

Gets or sets the icon height within the button’s content. This is a bindable property.

IconWidth

Gets or sets the icon width within the button’s content. This is a bindable property.

IconPlacement

Gets or sets the icon position within the button’s content. This is a bindable property.

IconIndent

Gets or sets the distance between icon and text within the button’s content. This is a bindable property.

You can also specify and customize an icon as button content.

XAML

<dxc:DXButton 
    BackgroundColor="White" 
    BorderThickness="1" 
    BorderColor="Gray" 
    CornerRadius="10" 
    WidthRequest="300" 
    Padding="0" 
    HeightRequest="60">
    <Grid ColumnDefinitions="*, 50">
        <Label 
            Text="Delete" 
            FontSize="18" 
            FontAttributes="Bold" 
            HorizontalOptions="Center"
            VerticalOptions="Center"/>
        <Border Grid.Column="1"
            BackgroundColor="Orange" 
            StrokeShape="RoundRectangle 0,15,0,15" 
            StrokeThickness="0">
            <Image 
                Source="bookmark1" 
                VerticalOptions="Center" 
                HorizontalOptions="Right"/>
        </Border>
    </Grid>
</dxc:DXButton>