Update icon docs

ruby_on_rails/font_awesome.md

@@ -1,31 +1,20 @@
-# Font-Awesome
+# Font Awesome
 
-You can either include font-awesome through their CDN or install it via npm/yarn.
+You can either include Font Awesome through their CDN or install it via npm/yarn.
 
 ## Installation with yarn
 
-### Set up
+### Pro version
 
-#### PRO version
+1. Look up the auth token which can be found [here](https://fontawesome.com/account). The credentials can be found on 1Password.
+1. Follow [these steps](https://docs.fontawesome.com/web/setup/packages#installing-pro) to set up _font-awesome_ pro either per project or globally.
 
-1. Look up the auth token which can be found [here](https://fontawesome.com/account). The credentials can be found on passwork
-1. Follow [these steps](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro) to set up _font-awesome_ pro either per project or globally.
-
-#### Free
+### Free
 
 For the free version of _font-awesome 5_ just run `yarn add @fortawesome/fontawesome-free`
 
-### Inclusion for Webpacker
-
-Include this code in your `stylesheets.scss`
-```
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
-@import '~@fortawesome/fontawesome-free/scss/fontawesome';
-@import '~@fortawesome/fontawesome-free/scss/solid';
-```
-
 ## Usage
 
-1. Navigate to the [font-awesome gallery list](https://fontawesome.com/icons?d=gallery)
+1. Navigate to the [Font Awesome gallery list](https://fontawesome.com/icons?d=gallery)
 1. Search for the icon that you wish to include and copy paste the `<i>` tag into your application:
 For example for the Angular symbol I can just use this tag: `<i class="fab fa-angular"></i>`

ruby_on_rails/material_symbols.md

@@ -0,0 +1,31 @@
+# Material Symbols
+
+You can either include Material Symbols via the Google CDN, download the font, or download the SVGs separately.
+
+## Installation
+
+1. Insert the code from [fonts.googleapis.com](https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0) into your CSS file.
+1. Download the WOFF2 file from the `src` URL and rename it, for example `material_symbols_outlined.woff2`.
+1. Place the font file in the `app/assets/fonts/` directory.
+1. Replace the URL to fonts.gstatic.com with the filename:
+
+```css
+@font-face {
+  font-family: Material Symbols Outlined;
+  src: url(material_symbols_outlined.woff2) format("woff2");
+}
+```
+
+## Usage
+
+1. Navigate to the [Material Symbols icon list](https://fonts.google.com/icons?icon.set=Material+Symbols)
+1. Search for the icon that you want to include and copy paste it into the HTML. For example, the search icon uses this tag: `<span class="material-symbols-outlined">search</span>`.
+1. You can also add a helper method if you want to use the icons with `icon(:search)`:
+
+```rb
+module ApplicationHelper
+  def icon(name)
+    tag.span(name, class: "material-symbols-outlined", "aria-hidden": true)
+  end
+end
+```