import * as React from 'react';
import { StyledHTMLElement } from 'styletron-react';
import { styled } from 'styletron-react';

export interface IIconProps {
    align?: boolean;
    iconSize?: number | string;
}

export const IconStyle = ({ align, iconSize }: IIconProps): React.CSSProperties => ({
    fontFamily: '"Material Icons"',
    fontSize: typeof iconSize === 'number' ? `${iconSize}px` : iconSize,
    textTransform: 'none',
    verticalAlign: align ? 'middle' : null,
});

export const Icon = styled<IIconProps>('span', IconStyle);