logo image

Material components for the web, Using Material Icons

Adding Material icons to your website is simple, All you need to do is include the Material Icons css file into your website. This you can do by adding the following tag into head section of your html page.

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

Once you added the css you can start using the material icons in your website by adding the following code.

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


Complete Code

    <title>Material Components for the web, Icons Demo</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">
  <body class="mdc-typography">
    <h3 class="mdc-typography--display2">Material Components for the web, Icons Examples</h3>
    <p><i class="material-icons">cloud</i> - cloud</p>
    <p><i class="material-icons"> play_arrow </i> - play_arrow </p>
    <p><i class="material-icons"> thumb_up_alt </i> - thumb_up_alt </p>

    <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>