kopia lustrzana https://github.com/shoelace-style/shoelace
5.9 KiB
5.9 KiB
Icon
[component-header:sl-icon]
Icons are symbols that can be used to represent or provide context to various options and actions within an application.
Shoelace comes bundled with over 1,000 icons courtesy of the Bootstrap Icons project. Click or tap on an icon below to copy the name and use it like this.
<sl-icon name="icon-name-here"></sl-icon>
Outlined
Filled
All icons
Examples
Icon Sizes
Icons are sized relative to the current font size. To change their size, set the font-size
property on the icon itself or on a parent element as shown below.
<div style="font-size: 32px;">
<sl-icon name="exclamation-triangle"></sl-icon>
<sl-icon name="archive"></sl-icon>
<sl-icon name="battery-charging"></sl-icon>
<sl-icon name="bell"></sl-icon>
<sl-icon name="clock"></sl-icon>
<sl-icon name="download"></sl-icon>
<sl-icon name="file-earmark"></sl-icon>
<sl-icon name="flag"></sl-icon>
<sl-icon name="heart"></sl-icon>
<sl-icon name="image"></sl-icon>
<sl-icon name="lightning"></sl-icon>
<sl-icon name="mic"></sl-icon>
<sl-icon name="search"></sl-icon>
<sl-icon name="star"></sl-icon>
<sl-icon name="trash"></sl-icon>
<sl-icon name="x-circle"></sl-icon>
</div>
Custom Icons
Custom icons can be loaded by setting the src
attribute. Only SVG images are supported
<sl-icon src="/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
[component-metadata:sl-icon]