Material Design Fonts selbst hosten

Material Design Fonts der Ruby on Rails App bekannt machen

Ich verwende in Ruby on Rails Applikationen überwiegend SCSS.
Die Vorteile:

Einfaches verschachteln der CSS Selektoren
Überprüfung der Syntax während das entsprechend CSS daraus erzeugt wird.
Da z.B. Variable vom Rails bzw. eigentlich von Ruby interpretiert werden, kann das ganze etwas dynamischer gestaltet werden.
Digest Hash im Dateinamen, ein Vorteil für Caching.

Für die Assets Pipeline wird in den neueren Rails Applikationen das gem propshaft verwendet. Es bietet fast alles was hierfür benötigt wird.
Lediglich eine Minifizierung der CSS wird nicht gemacht, das ist bei den heutigen Internetgeschwindigkeiten eher in den Hintergrund gerückt und entspricht mehr den Open Source Gedanken.
Meine Meinung ist, jeder der Open Source Programme verwendet, sollte in einem vertretbarem Rahmen seine Code zur Verfügung stellen, damit wiederum andere davon Profitieren können.

Datei application.scss

@charset "utf-8";
@use 'webfonts/material_icons';

Datei webfonts/material_icons

@charset "utf-8";
/**
 * **************************************************************************
 * Author: Matthias Karr <no-reply@x11media.com> - X11MEDIA
 * -------------------------------------------------------------------------
 * File: stylesheets/webfonts/material_icons.scss
 * Encoding: UTF-8
 *
 * Create on: 01.02.2019 17:13
 * Last update: 30.06.2026
 * Version: 1.0
 * *************************************************************************
*/

@use "../settings" as defaults; // => initial-variables

// Variable für den Basis Pfad 
$material-font-path: 'webfonts/material-design-icons/';

/**
 * Styling icons in material design
 * 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.
 */

@font-face {
  font-family: 'Material Icons Regular';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url('#{$material-font-path}MaterialIcons-Regular.woff2') format('woff2'),
  url('#{$material-font-path}MaterialIcons-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Material Icons Outlined Regular';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url('#{$material-font-path}MaterialIconsOutlined-Regular.woff2') format('woff2'),
  url('#{$material-font-path}MaterialIconsOutlined-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Material Icons Round Regular';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url('#{$material-font-path}MaterialIconsRound-Regular.woff2') format('woff2'),
  url('#{$material-font-path}MaterialIconsRound-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url('#{$material-font-path}MaterialSymbolsOutlined.woff2') format('woff2');
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-symbols-outlined {
  font-family: 'Material Icons Regular';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined Regular';
}
.material-icons-round {
  font-family: 'Material Icons Round Regular';
}
.material-icons-sharp {
  font-family: 'Material Icons Sharp Regular';
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
}

/**
 * Rules for sizing the icon.
 * Although the icons in the font can be scaled to any size, in accordance with
 * material design icons guidelines, we recommend them to be shown in either 18,
 *  24, 36 or 48px. The default being 24px.
 * CSS rules for the standard material design sizing guidelines:
 */
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-dashboard {
  font-size: 48px;
  //color: $dark-gray;
  color: defaults.$primary;
  &:hover{
    color: defaults.$primary;
  }
}
.top-bar.main-nav ul.menu a i{
  font-size: 14px;
}
/**
 * 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.
 *
 * Here are some examples, using the material CSS styles described above:
 */

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Aus Performance Gründen sollten die Fonts vorgeladen werden.
Dazu wir im HTML <head> der Datei app/views/layouts/application.html.erb folgendes integriert:

<link rel="preload" href="<%= asset_url('webfonts/material-design-icons/MaterialIcons-Regular.woff2')%>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<%= asset_url('webfonts/material-design-icons/MaterialIcons-Regular.ttf')%>" as="font" type="font/truetype" crossorigin>
<link rel="preload" href="<%= asset_url('webfonts/material-design-icons/MaterialIconsOutlined-Regular.woff2')%>" as="font" type="font/woff2" crossorigin>

Material Icons Verwenden

<i class="material-icons">home</i>
<i class="material-icons">list</i>
<i class="material-icons">diamond</i>
<i class="material-icons-outlined">article</i>

Material Design Fonts selbst hosten

Subpages Menu

Material Design Fonts installieren

Material Design Fonts der Ruby on Rails App bekannt machen