Material-UIにおける削除アイコンの使用方法

削除アイコンを表示するためには、まずMaterial-UIライブラリをインストールする必要があります。以下のコマンドを使用して、プロジェクトにMaterial-UIを追加します。

npm install @mui/material

または

yarn add @mui/material

インストールが完了したら、削除アイコンを表示するコンポーネントを作成できます。以下のコードは、Material-UIのIconButtonコンポーネントを使用して削除アイコンを表示する例です。

import React from 'react';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
function DeleteButton() {
  return (
    <IconButton aria-label="delete">
      <DeleteIcon />
    </IconButton>
  );
}
export default DeleteButton;

上記の例では、IconButtonコンポーネントを作成し、aria-labelプロパティに「delete」という値を設定しています。IconButtonの内部にはDeleteIconコンポーネントが配置され、削除アイコンが表示されます。

このようにして削除アイコンを表示すると、ユーザーはクリックすることで削除操作を実行することができます。削除アイコンの外観や動作をカスタマイズするには、Material-UIのドキュメントを参照してください。

以上が、Material-UIで削除アイコンを使用する方法の簡単な例です。この方法を応用して、さまざまなUI要素にアイコンを追加することができます。詳細な情報や他のアイコンの使用方法については、Material-UIの公式ドキュメントを参照してください。