Material Icons CDN - Google CDN Link

<!DOCTYPE html>
<html>

<head>
    <link
        href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp&amp;display=swap"
        rel="stylesheet">
</head>
<body>
    <div class="container">
        <h3>Google Material Icons CDN</h3>
        <div class="card"><i class="material-icons">check_circle</i>
            <i class="material-icons-outlined">star</i>
            <i class="material-icons-two-tone">thumb_up</i>
            <i class="material-icons-round">favorite</i>
            <i class="material-icons-outlined">settings</i>
            <i class="material-icons-two-tone">mail</i>
            <i class="material-icons">person</i>
            <i class="material-icons-outlined">cloud_upload</i>
            <i class="material-icons-two-tone">attach_file</i>
            <i class="material-icons-round">location_on</i>
            <i class="material-icons-outlined">alarm</i>
            <i class="material-icons-two-tone">check</i>
            <i class="material-icons">book</i>
            <i class="material-icons-outlined">dashboard</i>
            <i class="material-icons-two-tone">face</i>
            <i class="material-icons">logout</i>
        </div>

</div>

</body>
<style>
    .container {
        margin: 0 auto;
        width: 600px;
        padding: 20px;
        display: flex;
        align-items: center;
        flex-direction: column;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    }

.card {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        justify-items: center;
    }

.card i {
        font-size: 24px;
        color: #333;
        padding: 20px;
        transition: color 0.3s ease-in-out;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    }

.card i:hover {
        color: #ff0000;
        /* Change to your desired hover color */
        cursor: pointer;
    }
</style>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <link
        href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp&amp;display=swap"
        rel="stylesheet">
</head>
<body>
    <div class="container">
        <h3>Google Material Icons CDN</h3>
        <div class="card"><i class="material-icons">check_circle</i>
            <i class="material-icons-outlined">star</i>
            <i class="material-icons-two-tone">thumb_up</i>
            <i class="material-icons-round">favorite</i>
            <i class="material-icons-outlined">settings</i>
            <i class="material-icons-two-tone">mail</i>
            <i class="material-icons">person</i>
            <i class="material-icons-outlined">cloud_upload</i>
            <i class="material-icons-two-tone">attach_file</i>
            <i class="material-icons-round">location_on</i>
            <i class="material-icons-outlined">alarm</i>
            <i class="material-icons-two-tone">check</i>
            <i class="material-icons">book</i>
            <i class="material-icons-outlined">dashboard</i>
            <i class="material-icons-two-tone">face</i>
            <i class="material-icons">logout</i>
        </div>
​
    </div>
​
</body>
<style>
    .container {
        margin: 0 auto;
        width: 600px;
        padding: 20px;
        display: flex;
        align-items: center;
        flex-direction: column;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    }
​
    .card {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        justify-items: center;
    }
​
    .card i {
        font-size: 24px;
        color: #333;
        padding: 20px;
        transition: color 0.3s ease-in-out;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    }
​
    .card i:hover {
        color: #ff0000;
        /* Change to your desired hover color */
        cursor: pointer;
    }
</style>
​
</html>