Inserting icon in Polaris Button component (React)

Solved
Highlighted
Tourist
4 1 0

I am trying to insert a Polaris Icon into a Polaris Button component. The end result would look something like thisScreen Shot 2020-06-22 at 5.51.44 PM.png

I know this is possible because the above image is taken directly from the built-in Analytics Dashboard available in every Shopify store. As far as I can tell, the Shopify team here has embedded a Calendar icon into a Polaris Button so that it appears before the text. 

Here's how I am trying to replicate:

import { Button } from '@shopify/polaris';
import { CalendarMajorMonotone } from '@shopify/polaris-icons';

const activator = (
          <Button onClick={togglePopoverActive}>
            <Icon source={CalendarMajorMonotone} />
            {props.timeframe}
        </Button>
    )

This gets the error (in Typescript): 

Type 'Element' is not assignable to type 'string'.

Probably the reason for the error is that the Button component's `children` property expects either a string or array of strings, and <Icon/> returns a JSX Element . Have other people encountered this / figured out a workaround?

0 Likes
Highlighted
Tourist
4 1 0

This is an accepted solution.

Answering my own question: this is what the `icon` prop is for. I had thought that was just to replace the entire button with an icon (which you can do using the `icon` and `plain` props and no text), but it can also be used to prepend an icon at the beginning of button text.

0 Likes