Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

namestringThe name of the icon or a base64 string to render it as an svg

Panoramica

The <mds-icon> web component is the single glyph primitive of the Magma Design System: it inlines an SVG into the DOM so the artwork inherits color and sizing from CSS, and it is the building block that nearly every other component (button, chip, input, banner, list-item, etc.) composes to render its iconography. It replaces a raw <img>/<svg> tag and centralizes how icon artwork is resolved.

Semantic Behavior

Decorative by default: The icon contributes no accessible name; meaning must come from the surrounding labelled control or text.Source resolution: name is interpreted three ways - a string starting with data:image/svg+xml;base64, is decoded inline, a markup string starting with <svg (with the space; <?xml is not recognised) is used verbatim, and anything else is treated as an icon filename slug fetched as <svg directory><slug>.svg (a name starting with http is fetched as it is). Without a name (attribute missing or empty, property undefined or null) the icon renders nothing, sends no request and logs nothing; removing name clears the icon.Async load: When name is a slug the icon paints once the SVG arrives; a failed fetch renders empty rather than throwing. Only the latest name and SVG path count: a request that finishes after a newer one is discarded.Path configuration: The SVG directory is set programmatically via the shared IconsSetService.setSvgPath() singleton (imported from @maggioli-design-system/magma/services), with the mdsIconSvgPath sessionStorage key as an optional fallback and the setSvgPath instance method as an alternative; icons that mounted before the path was configured reload themselves once it is set. An icon removed from the page stops listening for path changes; once it is put back it picks up a path set in the meantime.

Properties & Visual Configurations

name is the only configurable input and is overloaded: pass an icon filename slug to pull artwork from the shared library, a base64-encoded SVG data: URI for inline/dynamic artwork, or a full raw SVG string when the markup is generated at runtime. This component does not use the shared variant / tone / size ladders defined in agents/variants.md; the color comes from the inherited CSS fill and the size from the host width (24px by default, the height follows the square aspect ratio), which is how parent components tint and scale their icons.

Dipendenze

Usato da: mds-avatar, mds-banner, mds-button, mds-chip, mds-file, mds-file-preview, mds-filter-item, mds-help, mds-img, mds-input, mds-input-select, mds-input-switch, mds-input-upload, mds-keyboard-key, mds-kpi-item, mds-list-item, mds-mention, mds-paginator-item, mds-policy-ai, mds-radial-progress, mds-stepper-bar-item, mds-tab-bar-item, mds-url-view, mds-usage