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" />

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>