How To Use
<!-- Include the JavaScript file -->
<script src="path/to/mui-icon.js"></script>
<!-- Then, include the component in your HTML -->
<mui-icon name="access-time" label="Party Time"></mui-icon>
Component Props
The <mui-icon>
web component accepts the following props (i.e. attributes):
Prop | Type | Default | Description |
---|---|---|---|
name |
string | (required) |
Specifies which MUI Icon to display in lowercase and dash-separated format (e.g.
shopping-cart , arrow-back ).
|
size |
string | null | Controls the icon size. Values: small (16px/1rem), medium (24px/1.5rem), large (32px/2rem), xlarge (48px/3rem). When omitted, inherits the font size of its parent. |
label |
string | null |
When provided, adds accessibility information for screen readers with
aria-label . When omitted, the icon is treated as decorative with aria-hidden="true" .
|
CSS Custom Properties
The component also accepts the following CSS custom properties for custom styling:
Property | Description |
---|---|
--icon-size-small |
Size for small icons. |
--icon-size-medium |
Size for medium icons. |
--icon-size-large |
Size for large icons. |
--icon-size-xlarge |
Size for xlarge icons. |
--icon-color |
Color for the icon. |
mui-icon {
--icon-size-small: 1rem;
--icon-size-medium: 1.5rem;
--icon-size-large: 2rem;
--icon-size-xlarge: 3rem;
--icon-color: crimson;
}
Sizes
-
null
(inherits font size) -
small
(16px) -
medium
(24px) -
large
(32px) -
xlarge
(48px)
<mui-icon size="xlarge" name="save"></mui-icon>
Accessibility
Icons can be made meaningful for assistive technologies with the
label
prop:
<!-- Meaningful Icon -->
<button>
<mui-icon label="Save" name="save"></mui-icon>
</button>
<!-- Decorative Icon -->
<button>
<mui-icon name="save"></mui-icon>
<span>Save</span>
</button>
- The icon is given explicit
label
prop for assistive technologies because there is no visible text label. - The icon omits the
label
prop because there is visible text label.
50 Most Popular Icons
-
home -
menu -
close -
search -
settings -
account-circle -
person -
email -
phone -
message -
notifications -
favorite -
star -
shopping-cart -
add -
remove -
delete -
edit -
save -
share -
download -
upload -
check -
clear -
arrow-back -
arrow-forward -
expand-more -
expand-less -
more-vert -
more-horiz -
refresh -
location-on -
calendar-today -
event -
access-time -
alarm -
visibility -
visibility-off -
lock -
lock-open -
info -
warning -
error -
help -
file-copy -
folder -
attach-file -
link -
print -
send
Preview More Icons
Enter any MUI Icon name to load it dynamically. Use lowercase and dash-separated format (e.g. shopping-cart
instead of ShoppingCart
). For a full list of icons, see the MUI Icons documentation.