Rence Material
Github

Icons

Rence Material uses Material Icons — Google's official icon font with over 2,500 glyphs. They are loaded via the Google Fonts CDN and are included automatically in the Starter Template.

Setup & usage

Include the Material Icons stylesheet in your <head>. Then use the icon name as text content inside a <i> element with class="material-icons".

HTML
<!-- Material Icons are available via the Google Fonts CDN -->
<!-- Already included in the Starter Template -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Usage: wrap the icon name in a <i> or <span> with class="material-icons" -->
<i class="material-icons">home</i>
<i class="material-icons">settings</i>
<i class="material-icons">favorite</i>
<i class="material-icons">search</i>

Common icons

A selection of the most commonly used Material Icons. For the full library, visit fonts.google.com/icons.

homehome
searchsearch
settingssettings
favoritefavorite
starstar
deletedelete
editedit
addadd
closeclose
menumenu
checkcheck
arrow_backarrow_back
arrow_forwardarrow_forward
personperson
emailemail
phonephone
locklock
visibilityvisibility
shareshare
downloaddownload
uploadupload
cloudcloud
notificationsnotifications
infoinfo
warningwarning
errorerror
check_circlecheck_circle
cancelcancel
calendar_todaycalendar_today
access_timeaccess_time
location_onlocation_on
mapmap

Sizes

grade
18px
grade
24px
grade
36px
grade
48px
HTML
<!-- Size: use font-size CSS or Material size classes -->
<i class="material-icons" style="font-size: 18px;">grade</i>
<i class="material-icons" style="font-size: 24px;">grade</i>   <!-- default -->
<i class="material-icons" style="font-size: 36px;">grade</i>
<i class="material-icons" style="font-size: 48px;">grade</i>

Colours

favoritecheck_circleerrorinfo
HTML
<!-- Colour: use Bootstrap text utilities or inline style -->
<i class="material-icons text-primary">favorite</i>
<i class="material-icons text-success">check_circle</i>
<i class="material-icons text-danger">error</i>
<i class="material-icons text-muted">info</i>

Icons in buttons

HTML
<!-- Icon in a button -->
<button class="btn btn-primary d-flex align-items-center gap-2" type="button">
  <i class="material-icons" style="font-size:20px;">add</i>
  Add Item
</button>

<!-- Icon-only circular button -->
<button class="btn rounded-circle d-flex align-items-center justify-content-center p-2 text-muted" type="button">
  <i class="material-icons">more_vert</i>
</button>