Material Icons Lister

Description

Optionally generates and downloads the Material Icons and Material Symbols font files, @fontface rules files, and a JSON object for use with Profound UI's pui.customIconList configuration.

Configurations

// ---- CONFIGURATIONS ---- //
var conf = {
  // downloadFontFiles (true/false): Do you want to download the sets related font files?
  downloadFontFiles: false,
  // ** File names for download font files cannot be customized. ** //

  // downloadFontFaces (true/false): Do you want to download the sets related @fontface rules file?
  // ** This considered true if downloadFontFiles is `true` because the file names and `src` property of the @fontface rules must match. ** //
  downloadFontFaces: false,

  // File name for the @fontface rules.
  fileNameFontFaces: 'MasterMaterialIcons.css',

  // downloadIconsList (true/false): Do you want to download the sets related icon list json file?
  downloadIconsList: true,

  // File name for the icon list json file.
  fileNameIconsList: 'MasterMaterialIcons.json',
  // ** The icons list JSON object saved in the icons list json file is to be added to pui.customIconList.icons[] array. ** //

  // Set the type name for the icon set. This is prepended to the icon name (i.e. "material:search") so that it can be handled by the icon handler function.
  // ** Unsupported names may require custom icon handler function. ** //
  iconsFontTypeName: 'material',

  // This is the title of the icon set list name to be shown in the dropdown selection.
  iconsFontListName: 'Material Icons Complete',

  // Name of Material Icons Set. This is referenced for URL building.
  MaterialIcons: 'Material Icons',

  // Name of Material Symbols Set. This is referenced for URL building.
  MaterialSymbs: 'Material Symbols',

  // Extension for codepoints files.
  cpt: '.codepoints',

  // Separator used between the Icon Font Name and the Icon Font Set Name of class names. (i.e. "--" => .pui-material-icons--outlined)
  sep: '--',

  // Replacement character for spaces in a Icon Font Set Name. (i.e. "-" => "Two Tone" to "Two-Tone")
  spc: '-',

  // Base URL to retrieve raw files from GitHub Repositories.
  GitHubRawFileURL: 'https://raw.githubusercontent.com/',

  // Base URL to Google's Material Icons codepoints.
  MaterialIconsURL: conf.GitHubRawFileURL + 'google/material-design-icons/master/font/MaterialIcons',

  // Base URL to Google's Material Symbols codepoints.
  MaterialSymbsURL: conf.GitHubRawFileURL + 'google/material-design-icons/master/variablefont/',

  // Base URL to Google's @fontface rules.
  GoogleFontCSSURL: 'https://fonts.googleapis.com/css2?family=',

  // Path to folder where fonts will be stored, absolute or relative to the folder containing the @fontface rules file.
  Path2FontsFolder: '../font/',

  // Material Icons sets to retrieve. Comment out unwanted sets.
  MaterialIconsSets: [
    // Material Icons
    'Regular',
    // Material Icons Sharp
    'Sharp',
    // Material Icons Round
    'Round',
    // Material Icons Two Tone
    'Two Tone',
    // Material Icons Outlined
    'Outlined',
  ],

  // Name where {XXX} is replaced with the Material Symbols set name.
  symbsSetCodepointsName: 'MaterialSymbols{XXX}[FILL,GRAD,opsz,wght]',

  // Material Symbols sets to retrieve. Comment out unwanted sets.
  MaterialSymbsSets: [
    // Material Symbols Outlined
    'Outlined',
    // Material Symbols Rounded
    'Rounded',
    // Material Symbols Sharp
    'Sharp',
  ],

  // Prefix to be used for generating class names for each of the Material Icons sets. (i.e. "pui-material-symbs" => "pui-material-symbs--outlined")
  materialIconsClassNamePrefix: 'pui-material-icons',

  // Prefix to be used for generating class names for each of the Material Symbols sets. (i.e. "pui-material-symbs" => "pui-material-symbs--outlined")
  materialSymbsClassNamePrefix: 'pui-material-symbs',
};

App Information

Author: Megan A. Bond

Last Update: October 28th, 2022