How to use Bootstrap Icons in Elixir Phoenix 1.5 app

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.