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.

Step 1: Download Blazorise from NuGet

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

Step 2. Download 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/

Step 3: Add Static Files

The next step is to change your index.html or _Layout.cshtml / _Host.cshtml file and include the CSS and JS source files:
<!-- 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 -->
<!-- jQuery first, then Popper.js, then Material JS -->
<script src="https://code.jquery.com/jquery-3.3.1.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>
<script src="js/material.min.js"></script>

<script src="_content/Blazorise.Material/blazorise.material.js"></script>

Step 4. Define Usings

In your main _Imports.razor add:
@using Blazorise

Step 5. Register Blazorise 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();

Step 6. PWA & Offline Support (optional)

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