Harmonize the use of icons in documentation

documentation/WRITERS-NOTES.md

@@ -133,14 +133,16 @@ Currently, we use three different sets of icons:
 
 The preference should be given to Mkdocs Material icons, since they were initially designed for `mkdocs` project and work very well with it. In rare cases, when an icon cannot be found in Mkdocs Material, you can find a suitable one on Iconscout. FontAwesome icons do not play well with Mkdocs, so use them with caution and don't forget to apply additional CSS styles in case they don't render well in PDF.
 
-Ideally, we should migrate to using just the two first sets.
+Ideally, we should migrate to using just the first set, which offers 10,000+ icons, that are more than sufficient for all our documentation needs.
 
 Use HTML for icons:
 
 - For Material Theme Icons (`:` prefix and suffix), go to <https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/>, find an icon, select it and copy the code here.
 - For PMM UI (Grafana) icons (`uil-` prefix), go to <https://iconscout.com/unicons/explore/line>, find an icon, select 'Font' and copy the code here.
 - For Font Awesome (`fa-` prefix), go to <https://fontawesome.com/icons>, find an icon, copy the code.
 
+Note: the following list is WIP and will be updated as we go along.
+
 | Unicons icon code                            | Description                        | Used where                           |
 | -------------------------------------------- | ---------------------------------- | ------------------------------------ |
 | <i class="uil uil-angle-down"></i>           | Down chevron                       | PMM UI                               |
@@ -151,7 +153,13 @@ Use HTML for icons:
 | <i class="uil uil-bolt"></i>                 | Lightening flash/bolt              | PMM UI - Nodes compare               |
 | <i class="uil uil-caret-right"></i>          | Right caret                        | General                              |
 | <i class="uil uil-clock-nine"></i>           | Clock (at nine)                    | PMM UI - Time range selector         |
-| <i class="uil uil-cog"></i>                  | Cog wheel                          | PMM UI Configuration                 |
+| :material-cog:                               | Cog wheel                          | PMM UI Configuration                 |
+| :material-cog-outline:                       | Cog wheel                          | PMM UI Configuration->Settings       |
+| :material-clipboard-list-outline:            | Clipboard list                     | PMM UI - Inventory                   |
+| :material-dots-horizontal:                   | Triple dots, aligned horizontally  | PMM UI - Backup in progress          |
+| :material-magnify-expand:                    | Advisors                           | PMM UI - Advisors                    |
+| :material-view-dashboard:                    | Abstract blocks assembly           | PMM UI - Dashboards                  |
+| :material-dots-circle:                       | A circle surrounded by smaller ones| PMM UI - Node dashboards             |
 | <i class="uil uil-comment-alt-share"></i>    | Share comment symbol               | PMM UI - Share dashboard image       |
 | <i class="uil uil-compass"></i>              | Compass                            | PMM UI - Explore                     |
 | <i class="uil uil-copy"></i>                 | Copy                               | PMM UI - Copy (e.g. backup schedule) |
@@ -171,7 +179,6 @@ Use HTML for icons:
 | <i class="uil uil-question-circle"></i>      | Question mark in circle            | PMM UI - Help                        |
 | <i class="uil uil-search-minus"></i>         | Minus in magnifying glass          | PMM UI - Time range zoom out         |
 | <i class="uil uil-search"></i>               | Magnifying glass                   | PMM UI - Search                      |
-| <i class="uil uil-setting"></i>              | Cog wheel                          | PMM UI Configuration->Settings       |
 | <i class="uil uil-share-alt"></i>            | Share symbol                       | PMM UI - Share dashboard             |
 | <i class="uil uil-shield"></i>               | Shield                             | PMM UI - Server admin                |
 | <i class="uil uil-star"></i>                 | Star                               | PMM UI - Dashboard favourites        |
@@ -183,17 +190,6 @@ Use HTML for icons:
 | <i class="uil uil-toggle-on"></i>            | Toggle (on)                        | PMM UI - Toggle switch               |
 | <i class="uil uil-trash-alt"></i>            | Trash can                          | PMM UI - Various 'Delete' operation  |
 
-Custom (in-house design) icons are defined as SVG code in `variables.yml`.
-
-| Usage                  | Description                          | Used where                       |
-| ---------------------- | ------------------------------------ | -------------------------------- |
-| `{{icon.addinstance}}` | Thin + in circle                     | PMM Add Instance                 |
-| `{{icon.checks}}`      | Checkbox list items                  | Inventory list                   |
-| `{{icon.inventory}}`   | Checkbox list items                  | PMM Inventory & Inventory List   |
-| `{{icon.dashboards}}`  | Abstract blocks assembly             | PMM Dashboards                   |
-| `{{icon.node}}`        | Circle surrounded by smaller circles | Node dashboards                  |
-| `{{icon.percona}}`     | Percona logo                         | Wherever PMM home icon is needed |
-
 ## Symbols
 
 While MkDocs will automatically replace certain strings with symbols, it's preferable where possible to use unicode symbols for other icons, so that they appear when the raw Markdown is exported as HTML and imported into Google Docs.

documentation/docs/advisors/advisors.md

@@ -21,7 +21,7 @@ If you are a Percona customer with a Percona Customer Portal account, you also g
 To see the complete list of available checks, see the [Advisor Checks for PMM](https://docs.percona.com/percona-platform/advisors.html) topic in the Percona Platform documentation.
 
 ## Enable/Disable
-To download the checks available for your Percona Account, the Advisors and Telemetry options have to be enabled under <i class="uil uil-cog"></i> **Configuration <i class="uil uil-setting"></i> > Settings > Advanced Settings**.
+To download the checks available for your Percona Account, the Advisors and Telemetry options have to be enabled under :material-cog: **Configuration >** :material-cog-outline: **Settings > Advanced Settings**.
 
 These options are enabled by default so that PMM can run automatic Advisor checks in the background. However, you can disable them at any time if you do not need to check the health and performance of your connected databases.
 
@@ -39,13 +39,13 @@ You can change the standard 24-hour interval to a custom frequency for each Advi
 To change the frequency of an automatic check:
 {.power-number}
 
-1. Click **{{icon.checks}} Advisors**.
+1. Click :material-magnify-expand: **Advisors**.
 2. Select the Advisor tab that contains the check for which you want to change the frequency.
 3. Expand the relevant Advisor and scroll through the list to find your check. Alternatively, use the **Filter** section at the top of the table to search checks by Name, Description, Status, or Interval.
 
     !!! hint alert alert-success "Tip"
         If you need to share filtered Advisor results with your team members, send them the PMM URL. This saves your search criteria and results.
-4. Click the ![Edit](../images/edit.png) **Interval** icon in the **Actions** column, next to the check you want to update.
+4. Click the :material-pencil-box-outline: **Interval** icon in the **Actions** column, next to the check you want to update.
 5. Chose an interval and click **Save**.
 
 ## Manual checks
@@ -54,7 +54,7 @@ In addition to the automatic checks that run every 24 hours, you can also run ch
 To run checks manually:
 {.power-number}
 
-1. Click **{{icon.checks}} Advisors** on the main menu.
+1. Click :material-magnify-expand: **Advisors** on the main menu.
 2. Select the Advisor tab that contains the checks which you want to run manually.
 3. Click **Run checks** to run all the available checks for this Advisor group, or expand an Advisor and click **Run** next to each check that you want to run individually.
 ![!Actions options](../images/PMM_Checks_Actions.png)
@@ -69,9 +69,9 @@ The results are sent to PMM Server where you can review any failed checks on the
 
 ![!Failed Advisor Checks panel](../images/HomeDashboard.png)
 
-To see more details about the available checks and any checks that failed, click the *{{icon.checks}} Advisors* icon on the main menu.
+To see more details about the available checks and any checks that failed, click the :material-magnify-expand: *Advisors* icon on the main menu.
 
-**Check results data *always* remains on the PMM Server.** This is not related to anonymous data sent for Telemetry purposes.
+Note: Check results *always* remain on the PMM Server. They are never sent as part of Telemetry.
 
 ## Create your own Advisors
 PMM Advisors offer a set of checks that can detect common security threats, performance degradation, data loss and data corruption.

documentation/docs/backup/mongodb-backup/create_PITR_mongo.md

@@ -49,7 +49,7 @@ Before creating a backup, make sure to check the [MongoDB backup prerequisites](
         Unless you are using verified custom workflows, make sure to keep the default **Folder** value coming from the cluster name. Editing this field will impact PMM-PBM integration workflows.
 
 11. Click **Schedule** to start creating the backup artifact.
-12. Go to the **All Backups** tab, and check the **Status** column. An animated ellipsis indicator {{icon.bouncingellipsis}} shows that a backup is currently being created.
+12. Go to the **All Backups** tab, and check the **Status** column. An animated ellipsis icon :material-dots-horizontal: shows that a backup is currently being created.
 
 ![!](../../images/PMM_Backup_Management-MongoDB-PITR-Enable.jpg)
 
@@ -69,4 +69,4 @@ Make sure to disable any other scheduled backup jobs before creating a PITR back
 
 ![!](../../images/PMM_Backup_Management-MongoDB-PITR-Enable-Error.jpg)
 
-This constraint applies at the service level. You can still have PITR enabled for one service while having regular scheduled backup jobs for other services.
+This constraint applies at the service level. You can still have PITR enabled for one service while having regular scheduled backup jobs for other services.

documentation/docs/backup/mongodb-backup/create_mongo_on_demand.md

@@ -30,4 +30,4 @@ To schedule or create an on-demand backup, check the instructions below. If you
             Unless you are using verified custom workflows, make sure to keep the default **Folder** value coming from the cluster name. Editing this field will impact PMM-PBM integration workflows.
 
 11. To start creating the backup artifact, click **Backup** or **Schedule** at the top of the window, depending on whether you are creating a scheduled or an on-demand backup.
-12. Go to the **All Backups** tab, and check the **Status** column. An animated ellipsis indicator {{icon.bouncingellipsis}} shows that a backup is currently being created.
+12. Go to the **All Backups** tab, and check the **Status** column. An animated ellipsis icon :material-dots-horizontal: shows that a backup is currently being created.

documentation/docs/backup/mongodb-backup/mongo_prerequisites.md

@@ -3,7 +3,7 @@
 Before creating MongoDB backups, make sure to:
 {.power-number}
 
-1. Check that **Backup Management** is enabled and the <i class="uil uil-history"></i> Backup option is available on the side menu. If Backup Management has been disabled on your instance, go to <i class="uil uil-cog"></i> **Configuration > PMM Settings > Advanced Settings**, re-enable **Backup Management**  then click **Apply changes**.
+1. Check that **Backup Management** is enabled and the <i class="uil uil-history"></i> Backup option is available on the side menu. If Backup Management has been disabled on your instance, go to :material-cog: **Configuration > PMM Settings > Advanced Settings**, re-enable **Backup Management**  then click **Apply changes**.
 2. [Prepare and create a storage location for your backups](../prepare_storage_location.md).
 3. Check that [PMM Client](../../install-pmm/install-pmm-client/index.md) is installed and running on all MongoDB nodes in the cluster.
 4. Check that [Percona Backup for MongoDB](https://docs.percona.com/percona-backup-mongodb/index.html) (PBM) is installed and `pbm-agent` is running on all MongoDB nodes in the replica set. Make sure to [configure the MongoDB connection URI for pbm-agent](https://docs.percona.com/percona-backup-mongodb/install/initial-setup.html#set-the-mongodb-connection-uri-for-pbm-agent) on all nodes.

documentation/docs/backup/mysql-backup/create_mysql_backup.md

@@ -20,4 +20,4 @@ To create a backup:
 8.  Leave the **Folder** field as is. This field is relevant for MongoDB backups to ensure compatibility with PBM wokflows and comes prefilled with the cluster label.
 9. Expand **Advanced Settings** to specify the settings for retrying the backup in case of any issues. You can either let PMM retry the backup again (**Auto**), or do it again yourself (**Manual**). Auto retry mode enables you to select up to ten retries and an interval of up to eight hours between retries.
 10. To start creating the backup artifact, click **Backup** or **Schedule** at the top of the window, depending on whether you are creating a scheduled or an on-demand backup.
-11. Go to the **All Backups** tab, and check the **Status** column. An animated ellipsis indicator {{icon.bouncingellipsis}} shows that a backup is currently being created.
+11. Go to the **All Backups** tab, and check the **Status** column. An animated ellipsis icon :material-dots-horizontal: shows that a backup is currently being created.

documentation/docs/backup/mysql-backup/mysql_prerequisites.md

@@ -3,7 +3,7 @@
 Before creating MySQL backups, make sure to:
 {.power-number}
 
-1. Check that **Backup Management** is enabled and the <i class="uil uil-history"></i> Backup option is available on the side menu. If Backup Managemt has been disabled on your instance, go to <i class="uil uil-cog"></i> **Configuration > PMM Settings > Advanced Settings**, re-enable **Backup Management** then click **Apply changes**.
+1. Check that **Backup Management** is enabled and the <i class="uil uil-history"></i> Backup option is available on the side menu. If Backup Managemt has been disabled on your instance, go to :material-cog: **Configuration > PMM Settings > Advanced Settings**, re-enable **Backup Management** then click **Apply changes**.
    !!! caution alert alert-warning "Important"
     If PMM Server runs as a Docker container, enable backup features at container creation time by adding `-e ENABLE_BACKUP_MANAGEMENT=1` to your `docker run` command.
 

documentation/docs/configure-pmm/advanced_settings.md

@@ -16,7 +16,7 @@ PMM Telemetry is based on data collected by various PMM components and stored in
 -!!! note alert alert-primary ""
     When PMM is installed, telemetry is not sent immediately. Before the first telemetry report is generated, PMM provides users with a 24-hour grace period to disable telemetry.
 
-To see the metrics being collected by telemetry, from the [main menu](../reference/ui/ui_components.md#main-menu) navigate to **PMM Configuration** > <i class="uil uil-setting"></i> **Settings** > **Advanced Settings** > **Telemetry** and hover over the exclamation mark.
+To see the metrics being collected by telemetry, from the [main menu](../reference/ui/ui_components.md#main-menu) navigate to **PMM Configuration** > :material-cog-outline: **Settings** > **Advanced Settings** > **Telemetry** and hover over the exclamation mark.
 
 ![!image](../images/PMM_Settings_Advanced_Settings_Telemetry.png)
 

documentation/docs/configure-pmm/percona_platform/check_percona_platform.md

@@ -26,7 +26,7 @@ After connecting to the Percona Platform, PMM has access to [additional alert te
 
 Disconnect a PMM instance when you want to unlink it from your Percona Platform organization or stop monitoring it there.
 
-To disconnect a PMM Server, go to <i class="uil uil-cog"></i> **Configuration > Settings > Percona Platform** and click **Disconnect**.
+To disconnect a PMM Server, go to :material-cog: **Configuration > Settings > Percona Platform** and click **Disconnect**.
 
 #### Disconnecting instances as an Admin
 

documentation/docs/install-pmm/install-pmm-client/connect-database/aws.md

@@ -153,7 +153,7 @@ GRANT SELECT, UPDATE, DELETE, DROP ON performance_schema.* TO 'pmm'@'%';
     It may take longer for PMM to discover Amazon RDS instances in the `creating` state. You must wait a bit longer until PMM discovers these instances.
 
 
-The preferred method of adding an Amazon RDS database instance to PMM is via the  <i class="uil uil-cog"></i> **Configuration** → {{icon.inventory}} **PMM Inventory** → {{icon.addinstance}} **Add Instance** menu option.
+The preferred method of adding an Amazon RDS database instance to PMM is via the :material-cog: **Configuration** → :material-clipboard-list-outline: **PMM Inventory** → :material-plus-circle-outline: **Add Instance** menu option.
 
 This method supports Amazon RDS database instances that use Amazon Aurora, MySQL, or MariaDB engines, as well as any remote PostgreSQL, ProxySQL, MySQL and MongoDB instances.
 

documentation/docs/install-pmm/install-pmm-client/connect-database/mysql.md

@@ -381,14 +381,14 @@ Add the database server as a service using one of these example commands. If suc
 #### TLS connection
 
 ```sh 
-pmm-admin add mysql --environment=test --custom-labels='source=slowlog'  --username=root --password=password --query-source=slowlog MySQLSlowLog localhost:3306
+pmm-admin add mysql --environment=test --custom-labels='source=slowlog' --username=root --password=password --tls --tls-skip-verify --tls-ca=pathtoca.pem --tls-cert=pathtocert.pem --tls-key=pathtocertkey.pem --query-source=slowlog MySQLSlowLog localhost:3306
 ```
 
 ### Install PMM Client as a remote instance
 If you need to monitor a MySQL instance from a different server where PMM Client is installed, follow these steps in the PMM web interface:
 {.power-number}
 
-1. Select <i class="uil uil-cog"></i> ** PMM Configuration > PMM Inventory > {{icon.addinstance}} Add Service**.
+1. Select :material-cog: **PMM Configuration > PMM Inventory > :material-plus-circle-outline: Add Service**.
 
 2. Choose **MySQL > Add a remote instance**.
 

documentation/docs/install-pmm/install-pmm-client/connect-database/postgresql.md

@@ -373,7 +373,7 @@ The `pmm-admin` flag limits Auto-discovery:
 To check the service from the PMM UI:
 {.power-number}
 
-1. Select <i class="uil uil-cog"></i> **Configuration** → {{icon.inventory}} **Inventory**.
+1. Select :material-cog: **Configuration** → :material-clipboard-list-outline: **Inventory**.
 2. In the **Services** tab, verify the **Service name**, **Address** and any other relevant details.
 3. In the **Options** column, expand the **Details** section and check that the Agents are using the desired data source.
 

documentation/docs/install-pmm/install-pmm-client/docker.md

@@ -55,7 +55,7 @@ You can now add services with [`pmm-admin`](../../use/commands/pmm-admin.md) by
 
     In the GUI:
 
-    - Select {{icon.dashboards}} *PMM Dashboards* → {{icon.node}} *System (Node)* → {{icon.node}} *Node Overview*.
+    - Select :material-view-dashboard: *PMM Dashboards* → :material-dots-circle: *System (Node)* → :material-dots-circle: *Node Overview*.
     - In the *Node Names* menu, select the new node.
     - Change the time range to see data.