Icons are not visible in available components

[Nguyễn Văn Long]

i created a new project using react and had an issue with the icons not showing up in the available components. Below is my code and screenshot

import "@mdui/icons/commute";
import "@mdui/icons/place";
import "@mdui/icons/people";

function NavigationBar() {
  return (
    <>
      {/* test */}
      <div
        style={{
          position: "absolute",
          bottom: 100,
          left: 50,
        }}
      >
        <mdui-icon-place></mdui-icon-place>
        <mdui-icon-people></mdui-icon-people>
        <mdui-icon-commute></mdui-icon-commute>
      </div>

      <mdui-navigation-bar value="item-1" style={{ position: "absolute" }}>
        <mdui-navigation-bar-item icon="place" value="item-1">
          Item 1
        </mdui-navigation-bar-item>
        <mdui-navigation-bar-item icon="commute" value="item-2">
          Item 2
        </mdui-navigation-bar-item>
        <mdui-navigation-bar-item icon="people" value="item-3">
          Item 3
        </mdui-navigation-bar-item>
      </mdui-navigation-bar>
    </>
  );
}

export default NavigationBar;

[zdhxiong]

If you use icons via the icon attribute, you don't need to import @mdui/icon, but you need to include the CSS file of the icon library. Please refer to the documentation: https://www.mdui.org/en/docs/2/components/icon#usage-material-icons