2.21.0
Icons enhance experiences by visually communicating meaning, actions, status, and feedback. Browse available icons on the Iconography page.
Use to create a static, non-interactive icon.
<svg class="mds-icon">
<use xlink:href="#heart">
<title>favorite</title>
</use>
</svg>
<mds-icon name="heart" title="favorite"></mds-icon>
Icons are available in small and medium sizes. The default size is medium, and you can use modifier classes or props to make them smaller or larger.
<svg class="mds-icon mds-icon--s">
<use xlink:href="#heart--s">
<title>favorite</title>
</use>
</svg>
<mds-icon name="heart--s" title="favorite"></mds-icon>
23px
by 23px
.15px
by 15px
.#000000
by default, style icons by adding a fill
property in your product’s CSS.
Class
|
Applies to
|
Outcome
|
---|---|---|
|
|
Scales icon down to |
@include mds-icon-height-removal()
Use to vertically center an icon without influencing overall vertical spacing, particularly when cropping text to cap height and baseline using the mds-text-crop
mixin.
When setting props as attributes on a custom HTML element, use kebab-case
instead of camelCase
.
Prop
|
Type
|
Validation
|
Default
|
Description
|
---|---|---|---|---|
|
String |
— |
— |
A space-separated list of class names that will be appended to the default |
|
String |
Required |
— |
A string containing a valid MDS icon name. |
|
String |
— |
— |
Describes the icon for assistive technologies. Used only when there is no accompanying text with the icon, e.g., a Button with icon. |
Setting name
via props:
<mds-icon name="heart"></mds-icon>
Setting name
and title
via props:
<mds-icon name="question-circle--s" title="FAQ"></mds-icon>
The MDS icon sprite (mds.svg
) must be injected into a page so that the icons can be accessed within the DOM. See Getting Started for details.
<title>
tag within the SVG with a text describing the icons.