Icon Font Example

[Shameka Cretsinger]

BootstrapIcons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. We recommend using a width: 1em (and optionally height: 1em) for easy resizing via font-size.

You can also use the SVG within your CSS (be sure to escape any characters, such as # to %23 when specifying hex color values). When no dimensions are specified via width and height on the , the icon will fill the available space.

When using SVGs with elements, screen readers may not announce them as images, or skip the image completely. Include an additional role="img" on the element to avoid any issues. See this article for details.

Material design system icons are simple, modern, friendly, and sometimesquirky. Each icon is created using our design guidelines to depict in simpleand minimal forms the universal concepts used commonly throughout a UI.Ensuring readability and clarity at both large and small sizes, these iconshave been optimized for beautiful display on all common platforms and displayresolutions.

We have made these icons available for you to incorporate them into yourproducts under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in yourproducts. We'd love attribution in your app's about screen, but it's not required.

The complete set of material icons are available on the material icon library. The icons are available for download in SVG or PNGs, formats that aresuitable for web, Android, and iOS projects or for inclusion in any designertools.

The material icon font is the easiest way to incorporate material icons withweb projects. We have packaged all the material icons into a single font thattakes advantage of the typographic rendering capabilities of modern browsers sothat web developers can easily incorporate these icons with only a few lines ofcode.

The icon font weighs in at only 42KB in its smallest woff2 format and 56KB in standard woff format.By comparison, the SVG files compressed with gzip will generally be around 62KB in size, but thiscan be reduced considerably by compiling only the icons you need into a single SVG file with symbolsprites.

Similar to other Google Web Fonts, the correct CSS will be served to activate the'Material Icons' font specific to the browser.An additional CSS class will be declared called .material-icons.Any element that uses this class will have the correct CSS to render these icons from the web font.

In addition, the CSS rules for rendering the icon will need to be declared torender the font properly. These rules are normally served as part of the GoogleWeb Font stylesheet, but will need to be included manually in your projects whenself-hosting the font:

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

Find both the icon names and codepoints on the material icons library by selecting any icon and opening the icon font panel. Each icon font has a codepoints index in our git repository showing the complete set of names and character codes (here).

These icons were designed to follow the material design guidelines and they look best when using the recommended icon sizes and colors. The styles below make it easy to apply our recommended sizes, colors, and activity states.

Using the icon font allows for easy styling of an icon in any color. In accordance with material design icon guidelines, for active icons we recommend 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.

The material icons are provided as SVGs that are suitable for web projects. Individual icons are downloadable from the material icons library. The SVGs are also available from the material design icons git repository under the path:

PNG is the most traditional way to display icons on the web. Our downloads from the material icons library provide both single and double densities for each icon. They are referred to as 1x and 2x respectively in the download. Icons are also available in the git repository under:

The Vector Drawable is currently only available as a black 24dp icon. This is for compatibility with our most standard icon size. To render the icon in a different color, use drawable tinting available on Android Lollipop.

Material icons also work well within iOS apps. In both the material icons library and git repository, these icons are packaged up in Xcode imagesets which will work easily with Xcode Asset Catalogs (xcassets). These imagesets can be added to any Xcode Asset Catalogs by dragging them into Xcode on to the asset catalog or by copying the folder into the xcasset folder.

The imageset contains the single, double and triple density images (1x, 2x, 3x) so they work on all known iOS screen densities. Both black and white icons are provided, but we recommend using UIImage's imageWithRenderingMode with UIImageRenderingModeAlwaysTemplate which will allow the image to be used as an alpha mask that can be tinted to any possible color.

Languages such as Arabic and Hebrew are read from right-to-left (RTL). For RTL languages, UIs should be mirrored to display most elements in RTL. When a user interface is mirrored for RTL, some of the icons should also be mirrored. When text, layout, and iconography are mirrored to support right-to-left UIs, anything that relates to time should be depicted as moving from right to left. For example, forward points to the left, and backwards points to the right. However, be mindful that the context in which the icon is placed also influences whether an icon should be mirrored or not.

Icons should only be mirrored if their direction matches other UI elements in RTL mode. When an icon represents visual features of your website that are different in RTL, then the icon should also be mirrored in RTL. For example, if the numbers in a numbered list are on the right side in the RTL language, then the numbers should be on the right side of the mirrored icon.

This Android developer article describes in-depth how to implement RTL user interfaces. By default on Android, icons are not mirrored when the layout direction is mirrored. You need to specifically mirror the appropriate icons when needed, either by providing specialized assets for RTL languages, or using framework functionality to mirror the assets.

To provide specialized assets for RTL languages, you can use the ldrtl qualifier on resource directories, such as res/drawable-ldrtl/. Resources inside such directories will only be used for RTL languages. For devices running Android API 19 or newer, the framework also provides the autoMirrored attribute for Drawables. When this attribute is set to true, the drawable will be automatically mirrored on RTL languages.

iOS has the concept of a UISemanticContentAttribute that is attached to each view. This can be unspecified, forceLeftToRight, forceRightToLeft, playback or spatial. iOS uses this value and the (left-to-right (LTR)/RTL setting of the device presenting the interface to determine the effectiveLayoutDirection of the view. This effectiveLayoutDirection determines whether or not to mirror an image when it is displayed.

By default, images' semantic content is set to unspecified. This causes them to be mirrored in RTL mode. If you do not want an icon to ever be mirrored, you need to explicitly set it to be forceLeftToRight. Apple calls out some exceptions that should not be mirrored, such as media playback (Fast Forward, rewind, etc.), musical notes, images indicating the passage of time, etc.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up.

Google has created over 2,100 official Material icons, each in five different "themes" (see below).For each SVG icon, we export the respective React component from the @mui/icons-material package.You can search the full list of these icons.

Each Material icon also has a "theme": Filled (default), Outlined, Rounded, Two-tone, and Sharp. To import the icon component with a theme other than the default, append the theme name to the icon name. For example @mui/icons-material/Delete icon with:

The Material Design guidelines name the icons using "snake_case" naming (for example delete_forever, add_a_photo), while @mui/icons-material exports the respective icons using "PascalCase" naming (for example DeleteForever, AddAPhoto). There are three exceptions to this naming rule: 3d_rotation exported as ThreeDRotation, 4k exported as FourK, and 360 exported as ThreeSixty.

The Icon component will display an icon from any icon font that supports ligatures.As a prerequisite, you must include one, such as theMaterial Icons font in your project.To use an icon simply wrap the icon name (font ligature) with the Icon component,for example:

Note that the Font Awesome icons weren't designed like the Material Icons (compare the two previous demos).The fa icons are cropped to use all the space available. You can adjust for this with a global override:

Both approaches work fine, however there are some subtle differences, especially in terms of performance and rendering quality.Whenever possible SVG is preferred as it allows code splitting, supports more icons, and renders faster and better.

There has been an on going discussion about wether Icon Fonts or SVG Icons are 'better' for usage on the web. This css-tricks article outlines the introductory differences between the two nicely. The author concludes that "If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts". This view has been debated somewhat, with Tyler Sticka laying down a solid case for moving away from Icon Fonts and Ben Frain making a succinct rebuttal. The general consensus within the web development community appears to have been to move over to SVGs however.

3a8082e126