0

I am trying to style the material icon in my react app using google material icon webapi.

I have tried this but it is not working. The icon is showing but the style I am applying to it is not working. They are not even showing when I inspect them. I want to give it a position absolute and move it around.

      const ArrowIcon = (props) => (
         <i className="material-icons-outlined"> {props.icon} </i>
      );
    
      const LeftBtn  =  styled(ArrowIcon)`
      position:absolute;
      font-size:100px;
      `;
      const RightBtn = styled(ArrowIcon)``;

return ( 
     <LeftBtn icon = {"arrow_back"} />
        <RightBtn icon = {"arrow_forward"}/> 
  )

EDIT: i just found the answer that worked for me ... here is the link , it was just below the method i was trying before.

https://stackoverflow.com/a/66222892/8680919

meivinay
  • 9
  • 4

1 Answers1

0

You suppose to pass the className prop in order to inject the generated className from CSS in JS:

const ArrowIcon = (props) => (
  <i className={classNames("material-icons-outlined", props.className)}>
    {props.icon}
  </i>
);
Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • not working, PS. i want to give it a position absolute and move it around. The icon is visible on screen but not taking css properties in LeftBtn or RightBtn – meivinay Sep 27 '21 at 16:18
  • I also want to add , onClick is also not working on LeftBtn and RightBtn. I am new to styled-Components. I really dont understand whats wrong i am doing here /n EDIT- i did a workaround for onClick like this ` const ArrowIcon = (props) => ( {props.icon} );` – meivinay Sep 27 '21 at 16:56