View Source MaterialIcons

Material icons is a collection of icons designed by Google under the material design guidelines. This library provides optimized svgs for each icon packaged as a Phoenix Component and is heavily inspired by the heroicons_elixir project.

The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the dropdown menu near top left to choose the Material Icons set.

The svg icons used by this library are optimized using SVGO and were collected from @marella's repository: https://github.com/marella/material-design-icons as indicated in the original material design icons repo's README: https://github.com/google/material-design-icons#material-design-iconssvg-- which are available under the Apache 2.0 License.

installation

Installation

If available in Hex, the package can be installed by adding material_icons to your list of dependencies in mix.exs:

def deps do
  [
    {:material_icons, "~> 0.1.0"}
  ]
end

usage

Usage

The components are provided by the MaterialIcons module. Each icon is a Phoenix Component you case use in your HEEx templates. By default, the icon components will use the filled style and the 24px size, but others values can be specified if you want to.

  <MaterialIcons.auto_awesome/>
  <MaterialIcons.auto_awesome style="outlined" />
  <MaterialIcons.auto_awesome style="two-tone" />
  <MaterialIcons.auto_awesome style="two-tone" size={42} />
  <MaterialIcons.auto_awesome style="two-tone" class="fill-green-500" />

If you want to compile the icons yourself, you can run the mix task mix icons to see helpfull information. You can also configure a different version of the icons and which styles you want to be included in the final bundle:

config :material_icons, 
  version: "0.14.2",
  styles: ~w(filled outlined round sharp two-tone)