[{"data":1,"prerenderedAt":10},["ShallowReactive",2],{"guide-use-material-symbols-in-html-and-css":3},{"slug":4,"title":5,"description":6,"date":7,"order":8,"html":9},"use-material-symbols-in-html-and-css","Using Material Symbols in HTML and CSS","Three ways to put Google's Material Symbols on a web page — the icon font from Google Fonts, a self-hosted font, or SVG files — with the trade-offs and the CSS you need for each.","2026-09-24",1,"\u003Cp>Material Symbols work on any website, with or without a framework. There are three common ways to use them, and the right one depends on how many icons you need and how much you want to customize them.\u003C\u002Fp>\n\u003Ch2>Option 1: the icon font from Google Fonts\u003C\u002Fh2>\n\u003Cp>This is the quickest way to start. Add one stylesheet to your page&#39;s \u003Ccode>&lt;head&gt;\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">&lt;link\n  rel=&quot;stylesheet&quot;\n  href=&quot;https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&quot;\n\u002F&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Then write the icon&#39;s name inside an element with the matching class:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">&lt;span class=&quot;material-symbols-outlined&quot;&gt;home&lt;\u002Fspan&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The font uses \u003Cem>ligatures\u003C\u002Fem>: the browser replaces the word \u003Ccode>home\u003C\u002Fcode> with the home icon. For the other styles, swap \u003Ccode>Outlined\u003C\u002Fcode> for \u003Ccode>Rounded\u003C\u002Fcode> or \u003Ccode>Sharp\u003C\u002Fcode> in both the URL and the class name (\u003Ccode>material-symbols-rounded\u003C\u002Fcode>, \u003Ccode>material-symbols-sharp\u003C\u002Fcode>).\u003C\u002Fp>\n\u003Ch3>Load only the icons you use\u003C\u002Fh3>\n\u003Cp>The full font is large because it contains every symbol. If you only need a few, add \u003Ccode>icon_names\u003C\u002Fcode> to the URL with a comma-separated, alphabetically sorted list:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">&lt;link\n  rel=&quot;stylesheet&quot;\n  href=&quot;https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&amp;icon_names=home,search,settings&quot;\n\u002F&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Each icon page on this site gives you a link that loads just that icon.\u003C\u002Fp>\n\u003Ch3>Size, color, fill and weight\u003C\u002Fh3>\n\u003Cp>The icon is text, so ordinary CSS works:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">.material-symbols-outlined {\n  font-size: 24px; \u002F* icon size *\u002F\n  color: #1a73e8;  \u002F* icon color *\u002F\n  font-variation-settings: &quot;FILL&quot; 0, &quot;wght&quot; 400, &quot;GRAD&quot; 0, &quot;opsz&quot; 24;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>font-variation-settings\u003C\u002Fcode> controls the four variable axes. See the \u003Ca href=\"\u002Fguides\u002Fmaterial-symbols-fill-weight-grade-optical-size\u002F\">fill, weight, grade and optical size guide\u003C\u002Fa> for what each one does.\u003C\u002Fp>\n\u003Ch2>Option 2: self-host the font\u003C\u002Fh2>\n\u003Cp>If you&#39;d rather not load anything from Google&#39;s servers — for privacy, performance or offline use — install the font from npm:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">npm install material-symbols\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>and import the style you need in your app&#39;s entry file or main stylesheet:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-js\">import &quot;material-symbols\u002Foutlined.css&quot;;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The classes and ligatures work exactly as with Google Fonts. The trade-off is that you ship the whole font (there&#39;s no \u003Ccode>icon_names\u003C\u002Fcode> subsetting), so this suits apps that use many icons.\u003C\u002Fp>\n\u003Ch2>Option 3: SVG files\u003C\u002Fh2>\n\u003Cp>SVGs are best when you need only a handful of icons, want zero font loading, or need icons in places fonts don&#39;t work well (emails, design tools, \u003Ccode>&lt;img&gt;\u003C\u002Fcode> tags, native apps).\u003C\u002Fp>\n\u003Cp>Download an SVG from any icon page, or install a package with one file per style, fill and weight:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">npm install @material-symbols\u002Fsvg-400\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Files are named by style and fill, for example \u003Ccode>@material-symbols\u002Fsvg-400\u002Foutlined\u002Fhome.svg\u003C\u002Fcode> and \u003Ccode>@material-symbols\u002Fsvg-400\u002Foutlined\u002Fhome-fill.svg\u003C\u002Fcode>. Other weights have their own packages, from \u003Ccode>@material-symbols\u002Fsvg-100\u003C\u002Fcode> to \u003Ccode>@material-symbols\u002Fsvg-700\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>Inline SVG\u003C\u002Fh3>\n\u003Cp>Paste the SVG into your HTML and set the fill to \u003Ccode>currentColor\u003C\u002Fcode> so it follows the surrounding text color:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">&lt;button class=&quot;icon-button&quot; aria-label=&quot;Search&quot;&gt;\n  &lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot;&gt;\n    &lt;path fill=&quot;currentColor&quot; d=&quot;…&quot; \u002F&gt;\n  &lt;\u002Fsvg&gt;\n&lt;\u002Fbutton&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The SVGs on this site use a 24 × 24 viewBox. Google&#39;s original files use \u003Ccode>viewBox=&quot;0 -960 960 960&quot;\u003C\u002Fcode>, which works the same way — just keep the \u003Ccode>viewBox\u003C\u002Fcode> that came with the file.\u003C\u002Fp>\n\u003Ch3>SVG as an image or CSS mask\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-html\">&lt;img src=&quot;\u002Ficons\u002Fhome.svg&quot; width=&quot;24&quot; height=&quot;24&quot; alt=&quot;Home&quot; \u002F&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>An \u003Ccode>&lt;img&gt;\u003C\u002Fcode> can&#39;t be recolored with CSS. If you need that, use the file as a CSS mask and color it with \u003Ccode>background-color\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">.icon-home {\n  width: 24px;\n  height: 24px;\n  background-color: currentColor;\n  mask: url(&quot;\u002Ficons\u002Fhome.svg&quot;) center \u002F contain no-repeat;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Which should you choose?\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>Google Fonts\u003C\u002Fth>\n\u003Cth>Self-hosted font\u003C\u002Fth>\n\u003Cth>SVG\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Setup\u003C\u002Ftd>\n\u003Ctd>One \u003Ccode>&lt;link&gt;\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>npm + one import\u003C\u002Ftd>\n\u003Ctd>Copy files or npm\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Change fill\u002Fweight with CSS\u003C\u002Ftd>\n\u003Ctd>Yes\u003C\u002Ftd>\n\u003Ctd>Yes\u003C\u002Ftd>\n\u003Ctd>No (pick another file)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Extra download\u003C\u002Ftd>\n\u003Ctd>Small with \u003Ccode>icon_names\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Whole font\u003C\u002Ftd>\n\u003Ctd>Only the icons used\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Works in emails and \u003Ccode>&lt;img&gt;\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003Ctd>No\u003C\u002Ftd>\n\u003Ctd>Yes\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2>Accessibility\u003C\u002Fh2>\n\u003Cp>Icon fonts read their ligature text aloud (&quot;home&quot;). If the icon is decorative or sits next to a text label, hide it from screen readers with \u003Ccode>aria-hidden=&quot;true&quot;\u003C\u002Fcode>. If the icon is the only content of a button or link, give the button an accessible name with \u003Ccode>aria-label\u003C\u002Fcode>, and still hide the icon itself.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">&lt;button aria-label=&quot;Delete&quot;&gt;\n  &lt;span class=&quot;material-symbols-outlined&quot; aria-hidden=&quot;true&quot;&gt;delete&lt;\u002Fspan&gt;\n&lt;\u002Fbutton&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n",1790274093736]