Button with circular icon in Ionic 4 placed outside of the toolbar or ion-buttons

Is it possible to create a circular, clear icon-only button without using ion-buttons? I am trying to achieve the same style as an icon-only button within ion-buttons (clear and circular).

Here is my current code:

<ion-button icon-only shape="round" color="white" fill="clear">
    <ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>

However, the resulting button does not appear circular. Instead, it appears as a rectangular button with rounded corners.

The Ionic 4 documentation does not provide guidance on how to achieve this effect.

angulartypescriptionic-frameworkionic4

Answer №1

If you're looking to implement a FabButton in a ReactJS app using Ionic components, here's a way to do it. Simply use the Angular versions of the components and you should achieve the same results.

<IonCard>
  <IonToolbar>
    <IonTitle>Test</IonTitle>
    <IonButtons slot="end">
      <IonButton
        style={{
          backgroundColor: "red",
          borderRadius: "100%",
          color: "white",
          width: 32
        }}
      >
        <IonIcon icon={close}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
  <IonCardContent>
    This is some text that is the content of the card with the close
    button below
  </IonCardContent>
</IonCard>

Answer №2

To use the ion-fab button, follow these steps:

<ion-fab vertical="center" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

Answer №3

Have you considered using this?

<ion-icon slot="icon-only" name="close-circle"></ion-icon>

or maybe try

<ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>

Answer №4

To achieve this effect, utilize the ionic css property known as --border-radius in the following manner:

<ion-button id="closeBtn"><ion-icon name="close"></ion-icon></ion-button>

In your CSS file, add the following code snippet:

#closeBtn {
  --border-radius: 100%;
}

Answer №5

If you want to accomplish this, you can utilize the ion-fat-button component:

<ion-fab-button (click)="handleAddPhoto()" color="light">
     <ion-icon name="camera-outline" color="primary"></ion-icon>
</ion-fab-button>

Answer №6

If you give this a try, it should help resolve your issue.

        <ion-content class="bg-image" padding>
        </ion-content>
        <ion-footer>
          <ion-toolbar>
            <button ion-button icon-only clear>
              <ion-icon name="home"></ion-icon>
            </button>
            <button ion-button icon-only clear>
              <ion-icon name="add"></ion-icon>
            </button>
          </ion-toolbar>
        </ion-footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Vue using Typescript, how would I go about defining a local data property that utilizes a prop as its initial value?

When passing a prop to a child component in Vue, the documentation states: The parent component updates will refresh all props in the child component with the latest value. Avoid mutating a prop inside a child component as Vue will warn you in the consol ...

javascripttypescriptvue.jsvuejs2

Using the Angular JSON pipe with angular-datatables

I am currently utilizing angular-datatables to exhibit NoSQL de-normalized data in a grid format for visualization purposes. Within my dataset, I have several intricate nested JSON objects and I intend to showcase a specific cell with formatted JSON using ...

jsonangularangular-datatablesangular-pipe

Having trouble with the npm install command for setting up the Angular dual list box feature

I attempted to run the npm i angular-dual-listbox --save command, but encountered numerous errors indicating version discrepancies despite having version 8.2.14. I referred to this article: npmjs. The error log is as shown below: C:\GUNEET KAUR\P ...

angularnpmvisual-studio-code

Troubleshooting problems with routing for an Angular 5 single page application when serving it from a Lumen 5.2 controller

I am facing an issue with serving an Angular SPA from a single routed Lumen endpoint. While the initial boot of the Angular application works fine when navigating directly to the endpoint, loading any child route of the Angular SPA does not work properly. ...

phpangularlaravelnginxlumen

Angular: facing difficulty displaying static html pages on server, although they render correctly when run locally

Within my Angular project, I have stored a few static html files (specifically sampleText.html) in the src/assets/html folder. In one of my components, I am attempting to fetch and display this file. The following code is being used for this purpose. Every ...

javascripthtmlangular

Exploring the depths of Angular8: Utilizing formControlName with complex nested

After dedicating numerous hours to tackle this issue, I finally came up with a solution for my formGroup setup: this.frameworkForm = this.formBuilder.group({ id: [null], name: ['', Validators.required], active: [true], pa ...

angulartypescriptformsformgroups

Limitation for class instance, not an object

Is it possible to implement type constraints for class instances only in TypeScript, without allowing objects? Here is an example of what I am trying to achieve: class EmptyClass {} class ClassWithConstructorParams { constructor (public name: string) ...

typescript

Exploring the integration of traditional service methodologies into modern Angular applications

I am tasked with converting various types of services like SOAP-based services, WCF XML services, and web services that are currently running in a Silverlight app. For this conversion, we plan to use Angular as the front end while keeping the server side u ...

c#.netangularwcfsilverlight

Error encountered in Angular Html2Pdf: Unable to assign the 'adoptedStyleSheets' attribute on 'ShadowRoot' due to DOMException

Looking for assistance in implementing html2pdf with Angular 12 to convert specific parts of an HTML page into a downloadable PDF. ERROR MESSAGE An error occurred while trying to execute the code: index-7a8b7a1c.js:150 Uncaught (in promise) DOMExce ...

javascriptangulartypescripthtml2pdfangular12

Avoiding the occurrence of routing errors when an error arises in Angular 2

I've observed that whenever an error occurs in my Angular 2 application, it also disrupts the routing. Is there a method to address this and avoid the issue of breaking routing? ...

angularroutes

What are the advantages of utilizing @input and @output instead of subject/services?

When passing data between child and parent components in Angular, we often utilize @Input and @Output. What advantages do @Input and @Output offer over using subjects or services? Aside from being the most conventional method provided by Angular itself, is ...

angularangular-componentsangular-changedetectiondata-sharingangular-lifecycle-hooks

JavaScript module declarations in TypeScript

Recently, I delved into the world of a Node library known as bpmn-js (npmjs.com). This library is coded in JavaScript and I wanted to incorporate typings, which led me to explore d.ts files. My folder structure looks like this webapp @types bpmn ...

javascripttypescripttypescript-typings

Auto increment package.json version in a monorepo configuration

I am working on an Angular 6 app configured as a monorepo, comprising of a project that needs to be published to NPM along with a demo app. To update the versions of both the application and the project, I would like to utilize the npm version command. Th ...

angularnpm

Update of Angular Material Table rows triggers a popup, however only the values from the first array are populated in all edited rows

Developed an application with two components (A & B) that includes a popup dialog for editing: Component A fetches the data from a service and loads it into a data table Component B initializes the data when a pop event is triggered from A. Usually, ...

angulartypescriptangular-materialangular-material-table

Tips for ensuring only one property is present in a Typescript interface

Consider the React component interface below: export interface MyInterface { name: string; isEasy?: boolean; isMedium?: boolean; isHard?: boolean; } This component must accept only one property from isEasy, isMedium, or isHard For example: <M ...

javascriptreactjstypescriptinterface

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Here is an example of some HTML code: .container { height: 100%; width: 100%; display: flex; flex-direction: column; padding: 10px; background-color: aqua; } .box { width: 100%; height: 100%; flex-grow: 1; background-color: cadetb ...

htmlcssangularflexbox

Tips for recognizing hyperlinks within a block of text and converting them to clickable links in Angular 2

My task is to create clickable links within a paragraph of strings. I tried using a custom pipe, but seem to be missing something essential. Here's my attempt: import { Pipe, PipeTransform } from '@angular/core'; import { DecimalPipe ...

javascriptangular

Accessing user information after logging in can be achieved through utilizing Web API in conjunction with Angular 5 Token Authentication

Every time I access my Angular app, the following information is displayed: access_token:"******************" expires_in:59 refresh_token:"******************" token_type:"bearer" However, I am now facing an issue where I cannot extract the user id from t ...

c#angularauthenticationasp.net-web-apitoken

Using Angular 2, you can pass an object as a parameter to a function

Is there a way to pass an object as a parameter in the DOM on this forum? Within my HTML code, I have the following: <div class="list-items"> <ul> <li *ngFor="let i of item"> <span (click)="onAdd({{newUser.us ...

typescriptangular

Initiate the deployment of the updated npm package

After I installed the npm package ngx-cookie-service, I made changes to the code in the node_module > ngx-cookie-service folder. While these changes worked perfectly on my local host, they did not work when I deployed my Angular app to Azure. What step ...

angularazurenpmnode-modules