Materialize CSS Icons

Materialize CSS icons are taken from Material design that is provided by google. These icons can be downloaded directly from the material design specs.

Materialize CSS supports the following popular icon libraries:

Font Awesome Icons
Google Material Icons
Bootstrap Icons

How To Use Materialize Icons ?

To use Material icons inside the project, simply add the given below CDN link inside the <head> section of the web page.

CDN Link
     
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

To use these icons, use the .material-icons class to the <i> element base class.

Icon
     
   <i class="material-icons">camera</i>

General Syntax

    <i class="Write down icon class ">Icon Name</i>

Try It Now

Source Code

     
      <i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>

Try it yourself

Source Code : Output

Icons Size

You can control the icon size either through the predefined classes or custom CSS. There are 4 predefined classes such as .tiny, .small, .medium & .large. It is used to control the size of the icons. These classes are used to create tiny, small, medium, and large sizes of the materialized icons correspondingly.

General Syntax

    <i class="{Icons class} { tiny | small | medium | large}">cloud</i>

Try It Now

Source Code

     
      <i class="material-icons tiny">cloud</i>
<i class="material-icons small">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons medium">cloud</i>
<i class="material-icons large">cloud</i>

Try it yourself

Source Code : Output

Icons List

Followings are the list of Materialize css icons.Use it inside your project.

3d_rotation

ac_unit

access_alarm

access_alarms

access_time

accessibility

accessible

account_balance

account_balance_wallet

account_box

account_circle

adb

add

add_a_photo

add_alarm

add_alert

add_box

add_circle

add_circle_outline

add_location

add_shopping_cart

add_to_photos

add_to_queue

adjust

airline_seat_flat

airline_seat_flat_angled

airline_seat_individual_suite

airline_seat_legroom_extra

airline_seat_legroom_normal

airline_seat_legroom_reduced

airline_seat_recline_extra

airline_seat_recline_normal

airplanemode_active

airplanemode_inactive

airplay

airport_shuttle

alarm

alarm_add

alarm_off

alarm_on

album

all_inclusive

all_out

android

announcement

apps

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS