Material-icons Example

Icons

To use Material Icons in Quarto, use the {{< mi >}} shortcode.

And you need to pass the icon name to this shortcode. To get the icon names, go to the Google’s webpage of Material Icons, click on the icon that you want to use, then a window from right will pop up with the icon name. Suppose you clicked on the icon Account Circle, then on the popped up window you will see the icon name account_circle, use this name in the shortcode.

Icons	Shortcode	Preview
Account Circle	{{< mi account_circle >}}	account_circle
Assignment	{{< mi assignment >}}	assignment
Verified User	{{< mi verified_user >}}	verified_user

Types

Material Icons comes in five types which are filled (default used in the shortcode), outlined, sharp, two_tone, and round. you can pass these theme name as the second argument after the icon name to the shortcode. If you do not pass any theme name, by default filled will be used.

Type	Shortcode	Preview
filled	{{< mi analytics >}}	analytics
outlined	{{< mi analytics type=outlined >}}	analytics
tow_tone	{{< mi analytics type=two_tone >}}	analytics
sharp	{{< mi analytics type=sharp >}}	analytics
round	{{< mi analytics type=round >}}	analytics

Sizing

Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, it is recommended the icons to be shown in either 18, 24, 36 or 48px. The default being 24px.

you can pass any arbitrary font-size in px, em, rem, vw or vh css units with the size keyword argument.

Shortcode	Preview
{{< mi bar_chart >}}	bar_chart
{{< mi bar_chart size=24px >}}	bar_chart
{{< mi bar_chart size=36px >}}	bar_chart
{{< mi bar_chart size=48px >}}	bar_chart
{{< mi bar_chart size=60px >}}	bar_chart
{{< mi bar_chart size=4em >}}	bar_chart

Coloring

Using the icon font allows for easy styling of an icon in any color. In accordance with material design icons guidelines, for active icons it is recommended using either black at 54% opacity or white at 100% opacity when displaying these on light or dark backgrounds, respectively. If an icon is disabled or inactive, using black at 26% or white at 30% for light and dark backgrounds, respectively.

you can use predefined css class md-dark, md-light, md-inactive to follow the above suggestion and pass these class to the shortcode using class keyword argument. To pass multiple classes, pass them as space separated wrapped within quotes.

Shortcode	Preview in white background
{{< mi insights class=md-dark >}}	insights
{{< mi insights class=“md-dark md-inactive” >}}	insights

Example for drawing an icon on a dark background with a light foreground color,

Shortcode	Preview in dark background
{{< mi insights class=md-light >}}	insights
{{< mi insights class=“md-light md-inactive” >}}	insights

Note: These icon themseleves does not come with dark background, you need to create dark background yourselves. Click </> Code on top right of this document, to see how I have created in this case for an example.

But of course, you can pass any arbitrary valid css colors using color keyword argument. To specify a color for icons, you can use css named colors (i.e. red, cornflowerblue etc), Hex values, RGB color model or HSL color model.

The complete list of available named color is here.

Shortcodes	Preview
{{< mi bubble_chart color=cornflowerblue >}}	bubble_chart
{{< mi bubble_chart color=#E86033 >}}	bubble_chart
{{< mi bubble_chart color=rgb(232,96,51) >}}	bubble_chart
{{< mi bubble_chart color=rgba(232,96,51,1) >}}	bubble_chart
{{< mi bubble_chart color=hsl(15,80%,56%) >}}	bubble_chart
{{< mi bubble_chart color=hsla(15,80%,56%,360) >}}	bubble_chart

Note that, when specifying color with either RGB or HSL model, DO NOT PUT SPACE BETWEEN VALUES. That is, do not write as rgb(232, 96, 51), instead write as rgb(232,96,51), otherwise it will not work.

Using Class

You can define a css class with all of the above properties and more and then pass it to the shortcode using class keyword.

CSS class

.styled {
  color: crimson;
  font-size: 4em;
  background-color: bisque;
  padding: 10px;
  border-radius: 10%;
  -webkit-box-shadow: 0px 0px 12px 10px rgb(255 112 112 / 65%);
  -moz-box-shadow: 0px 0px 12px 10px rgba(255,112,112,0.65);
  box-shadow: 0px 0px 12px 10px rgb(255 112 112 / 65%);
}

Shortcodes	Preview
{{< mi waterfall_chart class=styled >}}	waterfall_chart
{{< mi schema class=styled >}}	schema