Replace button screenshots by iconify icons (#33933)

source/_dashboards/sections.markdown

@@ -52,7 +52,7 @@ Once you have created a sections view, you can populate it with sections and car
     ![Add Section button](/images/dashboards/sections_view_add-card-or-section.png)
 
 2. To add a new section, select the **Create section** button.
-3. To edit the section title, select the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-edit.png" alt="Edit icon"/> button.
+3. To edit the section title, select the edit {% icon "mdi:edit" %} button.
    - If you leave the section title empty, this line will be hidden.
 4. If you want this section to be visible only to specific users or under a certain condition, you can define those conditions:
    - On the **Visibility** tab, select **Add condition**.
@@ -66,14 +66,14 @@ Once you have created a sections view, you can populate it with sections and car
 
 1. To delete a section, go to the dashboard and in the top right corner, select the pencil icon.
 2. Open the view with the section you want to delete.
-3. Select the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-trash.png" alt="Delete icon"/> button.
+3. Select the delete {% icon "mdi:trash" %} button.
 
 ## Rearranging sections and cards
 
 In the sections view, you can rearrange sections and cards by dragging them to a new location. This is not yet possible in other views.
 
 1. To edit your dashboard, in the top right corner, select the pencil icon.
-2. To rearrange sections, hold the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-move.png" alt="Move icon"/> button and move the card.
+2. To rearrange sections, hold the move {% icon "mdi:cursor-move" %} button and move the card.
 
     <p class='img'>
         <img src="/images/blog/2024-03-dashboard-chapter-1/drag-and-drop-sections.gif" alt="Rearranging sections by dragging"/>
@@ -91,7 +91,7 @@ In the sections view, you can rearrange sections and cards by dragging them to a
 
 You can choose to show or hide certain sections based on different conditions. The [available conditions](/dashboards/conditional/#card-conditions) are the same as that for the conditional card.
 
-To edit the section visibility conditions, select the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-edit.png" alt="Edit icon"/> button and then click on the visibility tab.
+To edit the section visibility conditions, select the edit {% icon "mdi:edit" %} button and then click on the visibility tab.
 
 ## Check out the demo
 

source/_docs/organizing/categories.markdown

@@ -35,7 +35,7 @@ Follow these steps to create a new category.
    - Select **Assign category** and select the category from the list.
    - If the category is not in the list, select **Add new category** and make a new one.
 3. To assign a category to multiple items:
-   - Select the <img height="28px" src="/images/organizing/multiselect_icon.png" alt="Multiselect icon"/> button.
+   - Select the multi-select {% icon "mdi:order-checkbox-ascending" %} button.
    - From the list, select all the items to which you want to apply a category.
    - In the top right corner, select **Move to category**.
    - Then, select the category from the list.

source/_docs/organizing/labels.markdown

@@ -42,14 +42,14 @@ Follow these steps to apply a label
    - Select one or more labels or select **Add new label** to create a new one.
 2. To apply a label to a device, entity, or helper:
    - Go to **{% my integrations title="Settings > Devices & Services" %}** and open the respective tab.
-   - Select the <img height="28px" src="/images/organizing/multiselect_icon.png" alt="Multiselect icon"/> button.
+   - Select the {% icon "mdi:order-checkbox-ascending" %} button.
    - From the list, select all the list entries to which you want to apply a label.
    - In the top right corner, select **Add label**. Then, select the labels from the list.
 
     ![Apply label](/images/organizing/labels_add_05.png)
 3. To apply a label to an automation, scene, or script:
    - Go to {% my automations title="**Settings** > **Automations & Scenes**" %} and open the respective tab.
-   - Select the <img height="28px" src="/images/organizing/multiselect_icon.png" alt="Multiselect icon"/> button.
+   - Select the {% icon "mdi:order-checkbox-ascending" %} button.
    - From the list, select all the list entries to which you want to apply a label.
    - In the top right corner, select the three dots {% icon "mdi:dots-vertical" %} menu, then select **Add label**. Then, select the labels from the list.
 
@@ -68,7 +68,7 @@ If you used this label in automations or script as targets, you need to adjust t
 1. Go to the data table that contains the element from which you want to remove the label:
    -  Go to **{% my integrations title="Settings > Devices & Services" %}** and open the respective tab.
    -  Or, go to {% my automations title="**Settings** > **Automations & Scenes**" %} and open the respective tab.
-2. Select the <img height="28px" src="/images/organizing/multiselect_icon.png" alt="Multiselect icon"/> button.
+2. Select the {% icon "mdi:order-checkbox-ascending" %} button.
    - From the list, select all the items from which you want to remove a label.
    - In the top right corner, select the three dots {% icon "mdi:dots-vertical" %} menu, then select **Add label**.
    - Then, deselect the checkbox for the label you want to remove.

source/_docs/organizing/tables.markdown

@@ -20,7 +20,7 @@ When working with tables, you can select multiple items to apply an action. If y
 
 ## Selecting multiple items in a table
 
-1. In your table, select the <img height="28px" src="/images/organizing/multiselect_icon.png" alt="Multiselect icon"/> button.
+1. In your table, select the {% icon "mdi:order-checkbox-ascending" %} button.
 
    ![Screenshots point out the enable selection mode button in the toolbar of the tables in Home Assistant](/images/blog/2024-04/enable-selection-mode.png)