KPC
Kevin Powell - Community•2mo ago
posix

Material Icons weird double outline

I would be so thankful for any hints as to why the strange double outline inside the icon appears. I have 
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<style>
.material-symbols-outlined {
            font-family: 'Material Symbols Outlined';
            font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }
</style>
</head>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<style>
.material-symbols-outlined {
            font-family: 'Material Symbols Outlined';
            font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }
</style>
</head>
No description
1 Reply
posix
posixOP•2mo ago
Okay I just worked it out myself 🙏 You have to include the ranges for font-variation-settings inside the <link> or else it won't work. I hadn't realised this. So 
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>

Did you find this page helpful?