0

I'm trying to use a MUI icon component inside of the background-image css property. I am not having any luck.

import styled from '@emotion/styled'
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';

const DivStyled = styled('div')`
  background-image: url(${ArrowForwardIcon}) /* this obviously isn't working */
}

`

Jason Y
  • 831
  • 5
  • 10
  • url accepts an url in css, not a react component. You're mixing css with js code so obviously it doesn't work. What are you trying to do anyway? – NearHuscarl Oct 21 '21 at 15:36
  • Trying to display the MUI SVG icon as the background image for the custom styled div. – Jason Y Oct 21 '21 at 16:03
  • I've pivoted to a different approach: https://stackoverflow.com/questions/62009252/use-material-ui-svg-icons-as-background-image – Jason Y Oct 21 '21 at 17:22
  • This seems to be the feasible approach: https://stackoverflow.com/questions/62009252/use-material-ui-svg-icons-as-background-image – Jason Y Oct 21 '21 at 19:32
  • There is another approach. You can place the div and icon inside a parent div of ```position: relative```, make the icon taking full height and width of the parent, and set the position of the div to ```absolute```. It automatically goes on top of the icon. – Medi Oct 21 '21 at 19:36

0 Answers0