[material-icons] Testing

I am using React Testing Library, Is it possible to test in specific Material UI icon as ArrowLeft / ArrowRight instead of .MuiSvgIcon-root?

App component:

return {open ? <ArrowLeft/> :<ArrowRight/>}

RTL Testing : Below tests are passing but it doesn’t check in specific ArrowLeft or ArrowRight icon.

describes("MockTest",()=>{

it("renders Left arrow",()=>{
const {container} = renders(<App open={true}/>);
expect(container.querySelector(".MuiSvgIcon-root").toBeTruthy();
});

it("renders Right arrow",()=>{
const {container} = renders(<App open={false}/>);
expect(container.querySelector(".MuiSvgIcon-root").toBeTruthy();
});

});

• I have searched the issues of this repository and believe that this is not a duplicate.

[kylegoetz]

Shouldn’t people be giving their semantic icons titleAccess prop and then querying for that? MUI’s own documents say you should use titleAccess for accessibility purposes.

I realize this issue is closed, but here’s the language in question:

Semantic SVG icons
You should include the titleAccess prop with a meaningful value. The role="img" attribute and the <title> element are added so that your icons are correctly accessible.

[eps1lon]

I think icons are the one case where we could make an exception since they have reasonable user impact and no simple alternative. I just hope we don’t have to argue why we ship them for icons but not component X.

I’d consider the bundle size implications negligible. If you’ve got many icons on your page then either: compression will flatten the curve or you should look at <use>.

And as a little bit of anecdotal cherry on top: facebook ships them in their SSR payload as well and twitter renders them client side.