Include an icon/image inside Ant Design Collapse panel other than expandIcon - reactjs

Question

I'm having issue adding icon in front of the header title as according to the Ant design collapse docs, we can only add expandIcon either on the right or left and I wonder if I can do both. But the icon I want to add is static which won't change when I clicked on panel to expand. Here's the picture to illustrate my CustomCollapse.
Here's my code of my collapse:
//styled
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0 10px 0 0;
box-shadow: none;
background-color: #0e0304;
.ant-collapse-content {
background-color: #0e0304;
color: #b5b5b6;
}
.ant-collapse-header {
color: #b5b5b6;
}
}
`;
_______________________________________________________
<StyledCollapse accordian activeKey={props.show ? key : []} onChange={combineFunc}>
<AntCollapse.Panel
{...props}
header={props.header}
showArrow={false}
bordered={false}
disabled={props.isFollowed}
key={props.panelID}
extra={
<span>
<div className={styles.extraContainer}>
{
!props.show && !props.isFollowed && props.panelID !== "1" && <img src={rewardIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> // show this box
}
{
props.show && !props.isFollowed && <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginRight:'10px', width:'auto', objectFit:'contain'}} /> // show this icon
}
{
props.isFollowed ? <img src={tickIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> : ""
}
</div>
</span>
}
>
{props.children}
</AntCollapse.Panel>
</StyledCollapse>
In the extra API, I have added display of +10. So i'm wondering if I can still add an icon in front of the header title and what API should I use.

Answer 1

Try it:
JSX return
function createMarkup() {
return {__html: '<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a" /> abc'};
}
return (
<Collapse defaultActiveKey={["1"]} onChange={onChange}>
<Panel
header={<div dangerouslySetInnerHTML={createMarkup()} />}
showArrow={false}
key="1"
>
<p>123</p>
</Panel>
</Collapse>
)
result: