Blazorise Material Usage

Quickly install Blazorise with Material, one of the world's most popular Blazor UI framework.

Since Material CSS is based on a Bootstrap you only need to change the CSS and JS sources. The code in _Imports.razor will stay the same as for the Bootstrap provider.

Install Packages

First step is to install a Material provider for Blazorise: 
Install-Package Blazorise.Material
You also need to install the icon package: 
Install-Package Blazorise.Icons.Material

Add Material CSS

Material CSS is not available through the CDN so you must download it yourself from djibe web page. After the download is finished you must extract the CSS and JS to the wwwroot folder inside of you Blazor project. 
blazorproject.client/
└── wwwroot/
    ├── css/
    └── js/

Add Static Files

Modify your project's HTML template to include the necessary CSS files. The files you add depend on whether you're working with a WebAssembly or Server project:

  • For WebAssembly, update index.html.
  • For Server, update _Layout.cshtml or _Host.cshtml.
  • For .NET 8, update App.razor.

Add these lines inside the <head> section: 
<!-- Material CSS -->
<link href="css/material.min.css" rel="stylesheet">

<!-- Add Material font (Roboto) and Material icon as needed -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Material/blazorise.material.css" rel="stylesheet" />
<link href="_content/Blazorise.Icons.Material/blazorise.icons.material.css" rel="stylesheet" />

<!-- Optional JavaScript -->
<!-- These are the standard js dependencies this provider typically dependes upon, but Blazorise deems these as optional as Blazorise Components should work correctly without these  -->
<!-- jQuery first, then Popper.js, then Material JS -->
<script src="https://code.jquery.com/jquery-3.5.0.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<!-- Mandatory JavaScript -->
<script src="js/material.min.js"></script>
<script src="_content/Blazorise.Material/blazorise.material.js"></script>

Add Imports

In your main _Imports.razor add: 
@using Blazorise

Register Services

Add the following lines to the relevant sections of Program.cs. 
using Blazorise;
using Blazorise.Material;
using Blazorise.Icons.Material;

builder.Services
    .AddBlazorise( options =>
    {
        options.Immediate = true;
    } )
    .AddMaterialProviders()
    .AddMaterialIcons();

PWA & Offline Support (optional)

For information about PWAs & offline support, please take a look at our PWA docs.

On this page