Icon

Icon 组件可直接渲染 Material Symbols 名称，便于在整个组件库和文档中复用相同的图标名称。独立图标默认尺寸为 24px，不受周围文本大小影响。图标需要跟随周围文本的大小和字重时，请使用 inline 变体。

settingssettings

示例

默认

Standalone icon defaults to 24px settingssettings Inline variant follows text size and weight settings

尺寸与自定义来源

使用图标尺寸演示对比密度、组件尺寸、来源校准和相对文本的图标。Icon 可在默认插槽中接收 SVG；contentRatio 可校准 SVG 内部留白，且不会改变布局。

参考

结构

高亮显示

元素	部件	选择器
<span>	root	[data-scope="icon"][data-part="root"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
name可选	The name of the Material Symbols Outlined icon to display. string | undefined	-
contentRatio可选	Nominal visible fraction of the source canvas (0.1–1). Defaults to 5/6 for Symbols and 1 for SVG slots. number | undefined	-
size可选	An explicit Icon size that overrides the variant default and --md-icon-size context. Accepts any valid CSS font-size value, such as "24px", "1.5em". string | undefined	-
weight可选	The font-weight of the Icon IconWeight | undefined	-	-
variant可选	Variant of the Icon. "standalone" (default) uses the default size and weight. "inline" follows the surrounding text size and weight unless explicitly overridden. standaloneinline	"standalone"	standaloneinline

插槽1

名称	参数	说明
default	-	Alternative SVG source. Takes precedence over name; set its contentRatio when the viewBox includes whitespace.

样式1

预览

Token	说明
--md-icon-sizeLayout 回退值1.5rem	Controls the icon size. Standalone icons default to 1.5rem; inline icons default to 1em.