How to use Bootstrap Icons in Elixir Phoenix 1.5 app

#phoenix #elixir #bootstrap #icons

Here is how I set up Bootstrap Icons in one of my Elixir Phonenix apps. To me it was more difficult than I expected so I want to write this post for future reference.

Get started

Install necessary libraries from NPM

I do not know much about Webpack but icons would not get loaded without file-loader set up. This post "Loading Fonts with webpack" by Chris Lis was helpful.

npm --prefix=assets install bootstrap-icons file-loader --save-dev

Import CSS and webfonts in the stylesheet

assets/css/app.scss

+ @import '../node_modules/bootstrap-icons/font/bootstrap-icons.css';
+
+ @font-face {
+   font-family: 'bootstrap-icons';
+   src: font-url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2') format('woff2'),
+     font-url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff') format('woff');
+ }

Set up the file-loader for web fonts

assets/webpack.config.js

           test: /\.[s]?css$/,
           use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
         },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '[name].[ext]',
+                outputPath: 'fonts/',
+              },
+            },
+          ],
+        },
       ],
     },
     plugins: [

Usage

Pick an icon from Bootstrap Icons website and copy and paste an "Icon font" HTML tag like:

<i class="bi bi-plus-circle"></i>

Alternative methods

Alternatively, PhoenixInlineSvg.Helpers.svg_image/2 from phoenix_inline_svg is straight-forward and useful when we want to render SVG files in our view templates. All we need is make assets/static/svg/generic/ folder and copy necessary SVG files into it.