Material components for the web, Using Material Icons

493

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>

Demo

<iframe height='432' scrolling='no' title='rvdpGx' src='//codepen.io/fastfoodcoding/embed/rvdpGx/?height=432&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/fastfoodcoding/pen/rvdpGx/'>rvdpGx</a> by fastfoodcoding (<a href='https://codepen.io/fastfoodcoding'>@fastfoodcoding</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

Complete Code

<html>
  <head>
    <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/material-components-web@latest/dist/material-components-web.min.css">
  </head>
  
  <body class="mdc-typography">
    <h3 class="mdc-typography--display2">Material Components for the web, Icons Examples</h3>
    <br>
    
    <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>
    
    <br><br><br><br>    
    <hr>


    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
  </body>
</html>