Discussion: Is it ok to test innerHTML of elements rendered by libraries?

We have a React, Material-UI project and we are writing tests for it.

Today we had a discussion: one of my colleagues wrote tests to ensure that in some condition, a <DoneIcon /> from material UI is rendered inside a container.

What he did was to copy HTML from browser's inspector, and assert if what is rendered is exactly that.

The code looked like something like this:

const svgHTMLEnable =
  '<svg class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall" focusable="false" viewBox="0 0 24 24" aria-hidden="true" title="Enable"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg>';

test('something', () => {
  // Arrange
  const { getByTestId } = render(<MyComponent />);

  // Act
  // ...

  // Assert
  expect(getByTestId('container-ti')).toHaveHTML(svgHTMLEnable);
})

I said that I disagree, and the only thing I could reason about was If we update Material-UI library, our test will fail.

He defended the code as I want to test if what is rendered there, is exactly a Checkbox icon and nothing else; and if Material-UI library updates, then there is only one place we have to touch.

Well, I doubted if the code is correct and this is a good testing. What do you think? Do you think this test adds value? Is it right to do something like this? Any approach that would satisfy the requirement this test needs?

Thanks!