Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Components

Icon

Visual cues to support user understanding of content or context

The <Icon> component is a simple wrapper around an <i> element styled using the Material Icons font.

The other components in the library use this component to display icons, so you can override it to customize the icon styles.

Usage 

search home menu close settings check_circle favorite add delete arrow_back star
search home menu close settings check_circle favorite add delete arrow_back star 
<div class="row" style="font-size:2rem;">
  <ui:Icon name="search" />
  <ui:Icon name="home" />
  <ui:Icon name="menu" />
  <ui:Icon name="close" />
  <ui:Icon name="settings" />
  <ui:Icon name="check_circle" />
  <ui:Icon name="favorite" />
  <ui:Icon name="add" />
  <ui:Icon name="delete" />
  <ui:Icon name="arrow_back" />
  <ui:Icon name="star" />
</div>
<div class="row" style="font-size:2rem;">
  <ui:Icon name="search" fill />
  <ui:Icon name="home" fill />
  <ui:Icon name="menu" fill />
  <ui:Icon name="close" fill />
  <ui:Icon name="settings" fill />
  <ui:Icon name="check_circle" fill />
  <ui:Icon name="favorite" fill />
  <ui:Icon name="add" fill />
  <ui:Icon name="delete" fill />
  <ui:Icon name="arrow_back" fill />
  <ui:Icon name="star" fill />
</div>

The size and color of the icon is determined by the font size of the parent element

Component arguments 

Icon 

ArgumentTypeDescription
name str Required. Name of the Material Symbol icon to show.
fill bool Whether to fill the icon with color. Default is false.

Components 

Component
File
Source
Icon
icon.jinja
icon.css