How to add icon for content (:before) styled-components?

Question

css

Hello, please tell me how to add an icon for content before in styled-components?

Source:

import { IoIosArrowBack} from 'react-icons/io'

 &::before {
    content: url(IoIosArrowBack);
    display: block;
    width: 20px;
    height: 20px;
  }

Answer 1

Convert the IoIosArrowBack icon to a link that content can use

const reactSvgComponentToMarkupString = (Component, props) =>
  `data:image/svg+xml,${encodeURIComponent(
    renderToStaticMarkup(createElement(Component, props))
  )}`;