圖示API

React Icon 元件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。

範例展示

如需此 React 元件的使用範例和詳細資訊，請造訪元件展示頁面

import Icon from '@mui/material/Icon';
// or
import { Icon } from '@mui/material';

請閱讀這份關於最小化套件大小的指南，以了解差異。

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
baseClassName	字串	'material-icons'	應用於圖示的基礎類別。預設為 'material-icons'，但可以變更為適合您正在使用的圖示字型的任何其他基礎類別（例如 material-icons-rounded、fas 等）。
children	節點	-	圖示字型連字的名稱。
classes	物件	-	覆寫或擴展應用於元件的樣式。請參閱下方的 CSS 類別 API 以了解更多詳細資訊。
color	'inherit' \| 'action' \| 'disabled' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| 字串	'inherit'	元件的顏色。它支援預設和自訂主題顏色，可以按照調色盤客製化指南中所示的方式新增。
component	元件類型	-	用於根節點的元件。可以是字串（用於 HTML 元素）或元件。
fontSize	'inherit' \| 'large' \| 'medium' \| 'small' \| 字串	'medium'	應用於圖示的字體大小。預設為 24px，但可以設定為繼承字體大小。
sx	Array<func \| 物件 \| 布林值> \| 函數 \| 物件	-	允許定義系統覆寫以及額外 CSS 樣式的系統 prop。請參閱 `sx` 頁面以了解更多詳細資訊。

`ref` 會轉發到根元素。

您可以使用 `MuiIcon` 透過主題變更此元件的預設 props。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。

類別名稱	規則名稱	描述
.MuiIcon-colorAction	colorAction	如果 `color="action"`，則應用於根元素的樣式。
.MuiIcon-colorDisabled	colorDisabled	如果 `color="disabled"`，則應用於根元素的樣式。
.MuiIcon-colorError	colorError	如果 `color="error"`，則應用於根元素的樣式。
.MuiIcon-colorPrimary	colorPrimary	如果 `color="primary"`，則應用於根元素的樣式。
.MuiIcon-colorSecondary	colorSecondary	如果 `color="secondary"`，則應用於根元素的樣式。
.MuiIcon-fontSizeInherit	fontSizeInherit	如果 `fontSize="inherit"`，則應用於根元素的樣式。
.MuiIcon-fontSizeLarge	fontSizeLarge	如果 `fontSize="large"`，則應用於根元素的樣式。
.MuiIcon-fontSizeSmall	fontSizeSmall	如果 `fontSize="small"`，則應用於根元素的樣式。
.MuiIcon-root	root	應用於根元素的樣式。

您可以使用下列其中一種客製化選項來覆寫元件的樣式

如果您在此頁面中找不到資訊，請考慮查看元件的實作程式碼以取得更多詳細資訊。