My approach for Adding SVG icons that resize correctly within text

svgreset.tsx

const svgReset = css`
  /* Visually match height of text... */
  /* this is to replace the Ink style which uses REMs and doesn't allow the component */
  width: auto;
  height: 1em;
  vertical-align: middle;
`

export const playIcon = css`
  ${svgReset};
  
  /* Each icon gets a custom translation so that the baseline and horizontal position matches the text */
 transform: translateY(-0.07em) translateX(-0.1em);
`

template.tsx

const Example = (Component: any) => {
  return (
      <div>
        <div style={{ fontSize: '0.7em', border: '1px dotted #ccc', margin: '1rem 0' }}>
          <strong>Extra Small Text: </strong>
          <Icon ariaLabel="test area label" />
        </div>
        <div style={{ fontSize: '0.8em', border: '1px dotted #ccc', margin: '1rem 0' }}>
          <strong>Small Text: </strong>
          <Icon />
        </div>

        <div style={{ border: '1px dotted #ccc', margin: '1em 0' }}>
          Medium Text (Default): <Icon />
        </div>

        <div style={{ fontSize: '1.5em', border: '1px dotted #ccc', margin: '1rem 0' }}>
          <strong>Large Text: </strong>
          <Icon />
        </div>

        <div style={{ fontSize: '3em', border: '1px dotted #ccc', margin: '1rem 0' }}>
          <strong>Extra Larger Text: </strong>
          <Icon />
        </div>
      </div>
)

export const Icon: React.FC<IconProps> = ({
  fillColor,
  strokeColor,
  className,
  ariaLabel,
  ...props
}) => {
  return (
    <svg
      width="28"
      height="28"
      viewBox="0 0 28 28"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={`${styles.playIcon} ${className || ''}`}
      aria-label={ariaLabel}
      {...props}
    >
      <circle cx="14" cy="14" r="14" fill={fill} fillOpacity="0.15" />
      <path
        d="M19.8261 13.5308L11.3056 8.57596C11.2252 8.52629 11.1327 8.5 11.0384 8.5C10.944 8.5 10.8515 8.52629 10.7711 8.57596C10.6883 8.62225 10.6195 8.69016 10.5718 8.77255C10.524 8.85493 10.4993 8.94875 10.5 9.04413V18.9616C10.4993 19.057 10.524 19.1508 10.5718 19.2332C10.6195 19.3156 10.6883 19.3835 10.7711 19.4298C10.8511 19.4764 10.9421 19.5006 11.0345 19.5C11.1293 19.4998 11.2225 19.4757 11.3056 19.4298L19.8261 14.4749C19.9081 14.4269 19.9761 14.358 20.0234 14.2751C20.0707 14.1923 20.0956 14.0984 20.0956 14.0029C20.0956 13.9073 20.0707 13.8134 20.0234 13.7306C19.9761 13.6477 19.9081 13.5789 19.8261 13.5308Z"
        fill={fill}
      />
    </svg>
  )
}