htmlgoogle-font-apigoogle-fonts

Combine all Google Material icon font requests into one


I was wondering if it possible to combine all requests below into one. Is it possible? If yes, how?

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone" rel="stylesheet" />

Solution

  • You can simply stack the family URL parameters. Note that I've used the css2 URL path variant.

    <link href="https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&family=Material+Icons+Round&family=Material+Icons+Sharp&family=Material+Icons+Two+Tone" rel="stylesheet" />
    
    <span class="material-icons-outlined">settings</span>
    <span class="material-icons-round">check_circle</span>
    <span class="material-icons-two-tone">account_circle</span>