CODEWITHSUNDEEP
cssiconsmaterial-designmaterial-ui
Artur Haddad
Artur Haddad

Reputation: 1529

How to use Material.io outlined icons in css pseudoelements (::before)?

I'm trying to add Material.io icon to a button using ::before, but it only displays the icon filled.

There are no guides about how to set the icon outlined.

This is my code:

.view-site:before{
    content: "\E8F4";
    font-family: 'Material Icons';
}

How do i display the outlined icon?

Upvotes: 2

Views: 3523

Answers (2)

Plastic
Plastic

Reputation: 10328

Google claim the new themes feature weeks ago but apparently there's no clue on how to use outlined, sharp, rounded and two tone icons.

I believe the only reference we got is here: https://github.com/google/material-design-icons/issues/773

Upvotes: 1

K K
K K

Reputation: 18099

I believe you missed the dot before the CSS rule. Here is the fixed solution:

.view-site:before {
  content: "\E8F4";
  font-family: 'Material Icons';
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="view-site">
  
</i>

Upvotes: 0

Related Questions