# ui: Refactor the \`Button\` component icon methods \(\#51496\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/4e8937b62d8b14e22d82a0ea4a06f4fc280f1491)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 4e8937b62d8b14e22d82a0ea4a06f4fc280f1491

Requested commit: 4e8937b62d8b14e22d82a0ea4a06f4fc280f1491

Commit: 4e8937b62d8b14e22d82a0ea4a06f4fc280f1491

Tree: 116e377cbc79417ef5064650608e054b324c4feb

Author: Danilo Leal

Committer: GitHub

## Message

````
ui: Refactor the `Button` component icon methods (#51496)

Previously, if you wanted to have a button that contains icons on both
edges, you'd need to use a `ButtonLike` component, which takes any
children. Meanwhile, the `Button` would only take one icon, where you
could control its position through the `IconPosition` enum. This has
always felt unnecessarily limiting. So, this PR removes this limitation
by adding two new methods to the button: `start_icon` and `end_icon`.

In the meantime, I have also been bothered by the unnecessary
indirection in the `IconButton` due to the existence of the `ButtonIcon`
component. So I figured I could also completely eliminate that by adding
some of its methods directly to the `IconButton` and in the Button, just
using a regular `Icon` component.

---
## Before
```rust
Button::new("id", "Label")
    .icon(IconName::Plus)
    .icon_position(IconPosition::Start)
    .icon_size(IconSize::Small)
    .icon_color(Color::Muted)
```

## After
```rust
Button::new("id", "Label")
    .start_icon(Icon::new(IconName::Check))
    .end_icon(Icon::new(IconName::ChevronDown).size(IconSize::XSmall))
```

This should have no visual impact to the UI.

Release Notes:

- N/A
````

## Parents

- [a623dc3d1a586e8180771e3e8143bacee7addfde](https://git.cafe/gitcafe/zed/commit/a623dc3d1a586e8180771e3e8143bacee7addfde?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/4e8937b62d8b14e22d82a0ea4a06f4fc280f1491?format=markdown)