Center S2 icons vertically inside the AccordionItemTitle

### Provide a general summary of the feature here

The [documentation](https://react-spectrum.adobe.com/Accordion#content) implies that icons are supported contend inside of the AccordionItemTitle component. While they do render, they are not vertically aligned, via flex styling, like the rest of the content. The request is to automatically vertically align all content, but certainly supported components that are mentioned in the documentation.

### 🤔 Expected Behavior?

Ideally this component automatically detects icons and centers the content automatically. The next best option would be to allow the stlye macro styles to apply to the internally created element.

> This may not be the best icon to demonstrate centering, a more-square one highlights the problematic default styilng better

### 😯 Current Behavior

Use the following code to see the problem ([StackBlitz](https://stackblitz.com/edit/4n7u7p1t?file=src%2FExample.tsx)):

```
import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, AccordionItemHeader} from '@react-spectrum/s2';
import User from '@react-spectrum/s2/icons/User'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

export default function Example() {
return (


User Settings

Configure your project settings including name, description, and permissions.



Preferences
User preferences content



);
}
```

---

Besides the general problem mentioned above there are two other problems that prevent workarounds:

- If you use the style macro on the AccordionItemTitle component, it only applies the styling to the container div of the item and the icon, which is inside the "internal" button, remains uncentered in this scenario.

- If you use an AccordionItemHeader and an AccordionItemTitle, the icon appears outside and the chevron and collapse/expand button appears to the right. The "title" isn't just the title.

```
import {Accordion, AccordionItem, AccordionItemHeader, AccordionItemTitle, AccordionItemPanel} from '@react-spectrum/s2';
import User from '@react-spectrum/s2/icons/User'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

export default function Example() {
return (




User Settings


Configure your project settings including name, description, and permissions.



Preferences
User preferences content


);
}
```

### 💁 Possible Solution

_No response_

### 🔦 Context

I am trying to add visually-related icons to the text in the accordion title sections to match a design provided by our UX designers who are attempting to use Spectrum S2 as our base component system.

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_